webpack基本使用与安装

提供一个作者自己基于 webpack 搞好的一个下载包，可以看看https://github.com/chichengyu/webpack

介绍 webpack 之前，我们先看看 nrm ：

nrm 提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；
什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；

1. 运行npm i nrm -g全局安装nrm包；
2. 使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
3. 使用nrm use npm或nrm use taobao切换不同的镜像源地址；

注意： nrm 只是单纯的提供了几个常用的 下载包的 URL地址，并能够让我们在 这几个 地址之间，很方便的进行切换，但是，我们每次装包的时候，使用的 装包工具，都是 npm

网页中引入的静态资源多了以后有什么问题？？？

1. 网页加载速度慢， 因为 我们要发起很多的二次请求；
2. 要处理错综复杂的依赖关系

而webpack可以解决上面的问题，webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具。

webpack与gulp区别

1. 使用Gulp， 是基于 task 任务的；
2. 使用Webpack， 是基于整个项目进行构建的；

• 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

webpack安装

1. 运行npm i(install) webpack -g全局安装webpack，这样就能在全局使用webpack的命令（npm uninstall webpack -g卸载 ）
   安装指定版本
   npm i webpack@3.3.0 -g
2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中，安装webpack到项目中时的打包命令，如：
   ./node_modules/.bin/webpack ./src/main.js -o ./dist/bundle.js
   npm install webpack@3.3.0 --save-dev
   清除安装内存
   cnpm cache clean
   cnpm cache clean --force // 4.0以上版本

   注意：

   1.webpack4.0以后需要加上 -o 表示--output输出的意思（如：webpack ./1.js -o ./2.js）
   2.可能还需要先 npm install webpack -D(--save-dev) 安装后，才能进行打包
   3.当前项目根目录还没有 package,json文件时，使用 npm init -y 就可以生成，不过需要注意的是，当前还没有安装 npm i webpack 时，必须先删除 package,json文件，当 webpack 安装后，再使用 npm init -y 生成 package.json文件，不然会报错。（如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的 package.json 文件）

注意：4.0以上的且需要安装热替换的可以直接输入

    npm install webpack webpack-cli webpack-dev-server --save-dev

一次性把需要的依赖安装完。
如果不成功，可单独安装 Webpack 开发工具

    npm install webpack-dev-server --save-dev

注意：运行热替换 webpack-dev-server时，必须把webpack安装到项目依赖

为了使用方便，可以在package.json中的 scripts配置一些使用的命令如下：

     "scripts":{
          // 名称:值
          // --open 表示运行命令就自动打开浏览器，--port 端口3000，--contentBase src 打开浏览器后自动打开根目录 src，--hot 可以使修改后的实现局部打包,同时浏览器自动刷新
         "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot" 
      }

然后在命令行直接输入 npm run dev 就执行了。（--open 表示运行命令就自动打开浏览器，--port 端口3000，--contentBase src 打开浏览器后自动打开根目录 src，--hot 可以使修改后的实现局部打包,同时浏览器自动刷新），
第二种配置方法
在配置文件中加入 devServer，如下：

    // 先修改 package.json中的命令 
    "scripts":{
           "dev":"webpack-dev-server" 
      }

    // 在 webpack.config.js配置文件中中加入
    const webpack = require('webpack');
    devServer:{
          open:true,// 自动打开浏览器
          port:3000,// 运行端口
          contentBase:'src',// 指定托管的根目录
          hot:true// 启动热更新
          //但是通过日志发现页面先热更新然后又自动刷新，这和自动刷新是一样的。 
          //如果只需要触发HMR，可以再加个参数hotOnly:true,这时候只有热更新，禁用了自动刷新功能。 
          //如果需要自动刷新就不需要设置热更新。
          hotOnly:true// 只有热更新，禁用自动刷新功能
          //服务端压缩是否开启
          compress:true,
    },
    plugins:[
         //热更新插件 new一个热更新模块对象
          new webpack.HotModuleReplacementPlugin(),
    ]

此时，可以安装一个在内存中生成 html 页面与处理路径的插件

npm i html-webpack-plugin -D

在 webpack.config.js 配置文件中加入如下：

const htmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
    // 在内存中创建一个 html 页面的插件
    new htmlWebpackPlugin({
          // 指定模板页面，将来会根据指定的页面路径去生成内存中的页面
          template:path.join(__dirname,'./src/index.html'),
          // 内存中生成的页面的名称
          filename:'index.html'
     })
]

'html-webpack-plugin'插件的作用：

1.自动在内存中根据指定的页面生成一个内存的页面
2.自动把打包好的 bundle.js 以正确的路径引入到页面底部，不需要我们手动处理 bundle.js 的路径。

css处理安装

包括less、scss、url路径

npm i style-loader css-loader -D
// less-loader 内部需要 依赖 less，所有需要安装 less
npm i style-loader less -D
npm i style-loader less-loader -D
// sass-loader 需要 内部依赖 node-sass，所有需要安装 node-sass
npm i style-loader node-sass -D
npm i style-loader sass sass-loader -D
// url路径 内部依赖 file-loader
npm i style-loader url-loader file-loader -D

Babel高级语法转低级

// 相当于转换工具    转换器
npm i babel-core babel-loader babel-plugin-transform-runtime -D
// 相当于语法   语法对应插件
npm i babel-preset-env babel-preset-stage-0 -D

env 是比较新的语法，包含了所有和es相关的语法
在 webpack.config.js 配置文件中加入匹配规则

      module: { // 这个节点，用于配置 所有 第三方模块 加载器 
        rules: [ // 所有第三方模块的 匹配规则
            { 
                test: /\.js$/, // 处理以.js结尾的文件
                use:'babel-loader',   //用babel-loader处理
                exclude:/node_modules/   // exclude 排除,不需要编译的目录,提高编译速度(node_modules是模块安装的位置,不需要编译)
            }
        ] 
      }

然后，在创建一个用于babel调用的文件，名为.babelrc，规范与json文件一样不能注释，且必须是双引号，内容如下：

 {
      "presets": ["env","stage-0"],
      "plugins": ["transform-runtime"]
  }

可以把 presets 理解成语法。

注意：在webpack打包前会，先进行 babel 转码，再打包，此时因为引入了第三方包文件，有些 js 文件会报错如下：

 bundle.js:34694 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

造成的原因可能是再引入的包中，运用了 "caller" "callee" "argusments" 这些再严格模式下不能用，而 webpack 默认启用严格模式，所以冲突了。
解决方案：1
安装一个插件，移除严格模式

// 移除严格模式插件
npm install babel-plugin-transform-remove-strict-mode

然后在 .babelrc 文件的 "plugins" 加入如下：

  {
      "plugins": ["transform-remove-strict-mode"],
  }

表示移除 webpack 打包时的严格模式。
解决方案：2
此时，我们就需要对引入的第三方包进行忽略(意思就是 不进行转码，只打包)，再 .babelrc 文件中,加入 .ignore 就是忽略的意思， 最终如下：

  {
      "presets": ["env","stage-0"],
      "plugins": ["transform-runtime"],
      "ignore":["./src/lib/mui/js/mui.min.js"]
  }

我此处引入mui.min.js时，会报错上面那个严格模式错误，加入了这个，表示对这个文件 不转码，只打包，就ok了

vue包安装

  npm i vue-loader vue-template-compiler -D

在 webpack.config.js 配置文件中，加入：

  module:{
       rules:[
            { test: /\.vue$/, use:"vue-loader"}, // 配置处理 .vue组件文件的 第三方 loader 规则
       ]
  }

main.js入口文件

入口文件 main.js,内容如下：

  // 处理 css 文件 npm i style-loader css-loader -D
  import "./src/css/index.css";
  // 处理 less 文件 npm i less-loader -D
  import "./src/css/index.less";
  // 处理 scss 文件 npm i sass-loader -D
  import "./src/css/index.scss";
  // 引入bootstrap  font 字体文件 npm i bootstrap -S
  import "bootstrap/dist/css/bootstrap.css";

webpack.config.js配置文件

在webpack.config.js对象身上，有一个model，它是一个对象，在这个对象身上，有个rules属性，这个rules属性是个数组，这个数组中存放了所有第三方文件的匹配和处理规则
为了使用方便，一般需要一个配置文件，内容如下：

  const path = require('path');

  // 通过node中的模块操作，向外暴露了一个配置对象
  module.exports = {
      mode: 'production',
      entry:path.join(__dirname,'./src/main.js'),// 待打包的入口文件
      output:{
        path:path.join(__dirname,'./dist'),// 打包到那个目录
        filename:'bundle.js'// 打包后的文件名称
      },
      plugins:[
        //热更新插件 new一个热更新模块对象
        new webpack.HotModuleReplacementPlugin(),
        // 在内存中创建一个 html 页面的插件
        new htmlWebpackPlugin({
            // 指定模板页面，将来会根据指定的页面路径去生成内存中的页面
            template:path.join(__dirname,'./src/index.html'),
            // 内存中生成的页面的名称
            filename:'index.html'
        })
      ],
      module: { // 这个节点，用于配置 所有 第三方模块 加载器 
        rules: [ // 所有第三方模块的 匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
            { test: /\.(jpg|png|jpeg|gif|bmp)$/, use: "url-loader?limit=7631&name=[hash:8]-[name].[ext]" }, // 配置处理 图片路径 文件的 第三方 loader 规则，?limit限制小于7631个字节的图片会用base64转码，name表示还是用图片原来的名称且前面加上8位的hash哈希值，防止文件名称冲突，ext还是图片原来的后缀
            { test: /\.(ttf|eot|woff|woff2)$/, use:"url-loader"}, // 配置处理 font 字体文件的 第三方 loader 规则
            { test: /\.js$/, use:"babel-loader",exclude:/node_modules/}, // 配置处理 高级语法转低级语法的 第三方 loader 规则
            { test: /\.vue$/, use:"vue-loader"}, // 配置处理 .vue组件文件的 第三方 loader 规则
        ] 
      },
      resolve:{
        alias:{
            // 修改 vue 被导入时的路径   $ 表示以 vue 结尾
            "vue$":"vue/dist/vue.esm.js",
            // 给根目录下的 src 目录配置别名。方便引入文件
            // 注意：在模板组件中的 <style>引入样式 需要加 ~ 波浪线
            // 如：import '~@css/style.css'
            "@": resolve("src")
        }
      }
  }

__dirname 当前运行的js文件所在的目录，配置文件一般放在根目录下。

注意

1、在 vue-cli 脚手架中，当在 resolve 中设置了路径别名后，在模板组件中的 <style> 中引入样式 需要加 ~ 波浪线，如： import '~@css/style.css' 。
2、在 vue-cli 脚手架中，在模板组件中的 <style> 中的样式可以穿透子组件，不受 scoped 限制，如： .swiper >>> .swiper-action { color:red }，>>>表示样式穿透，表示 .swiper 里面所有子组件，出现 .swiper-action 的都应用这个样式

真机测试

先在电脑上下载一个热点，比如：360wifi、猎豹无限wifi，然后将手机链接上热点，接着 cmd 窗口输入 ipconfig ，查看 《无限局域网 适配器 本地链接* 》这一栏，找到 《IPv4》的这个 ip地址，复制一下，然后的打开 package.json 文件，再 "dev" 后加上一项 --host 指定一下 ip（默认是localhost） 如下：

     "scripts":{
          // --open 表示运行命令就自动打开浏览器，--port 端口3000，--contentBase src 打开浏览器后自动打开根目录 src，--hot 可以使修改后的实现局部打包,同时浏览器自动刷新，--host 指定ip地址
         "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot --host 172.23.232.1" 
      }

此时，就可以在 手机上输入 172.23.232.1 地址就能访问到当前正在开发的项目。

webpack命令

webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包
webpack --watch //监听变动并自动打包
webpack -p //压缩混淆脚本，这个非常非常重要！
webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了