vue-cli中配置webpack系列文章八 ------ 工程常用配置

一 webpack.base.conf.js

  1. entry 为入口文件
  1.1 在此可以绑定 babel 垫片 处理ie兼容
  1.2 我们大部分为单页面应用（SPA），配置多页面也可以在此配置

  2. resolve.alias 别名/重定向
  可以简写文件引入路径，避免大量无用代码，并且增加代码可读性，可以省略扩展名如 （'.js', '.vue', '.json'）

  3. webpack强大的 loader  功能
  3.1 可以设置 eslint ，对.js和.vue文件在编译之前进行检测，检查有没有语法错误
  3.2 新增文件类型，必须在此配置，否则不识别
  3.3 limit 限制 10000 个字节以下的图片才使用DataURL
  3.4 babel-loader 对js文件使用babel-loader转码,该插件是用来解析es6等代码

  4. node
  该选项是Node.js全局变量或模块，这里主要是防止webpack注入一些Node.js的东西到vue中

二 webpack.dev.conf.js

  1. html-webpack-plugin
  这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

  new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
      filename: '../view/index.html', //生成的html存放路径，相对于path的路径
      template: './index.html', //html模板路径
      inject: 'body', //js插入的位置，true/'head'/'body'/false
      favicon: './images/favicon.ico', //favicon路径 设置favicon属性，属性值是favicon所在的路径。
      minify: { //压缩HTML文件
          removeComments: true, // 移除HTML中的注释
          collapseWhitespace: true, // 删除空白符与换行符
          removeAttributeQuotes: true // 移除属性的引号
      }
  })

  2. copy-webpack-plugin
  将单个文件或整个目录复制到构建目录DefinePlugin允许在编译时(compile time)配置的全局常量DllPlugin为了极大减少构建时间。
  from    定义要拷贝的源目录           from: __dirname + ‘/src/public’
  to      定义要拷贝到的目标目录     from: __dirname + ‘/dist’
  toType  file 或者 dir         可选，默认是文件
  force   强制覆盖先前的插件           可选 默认false
  context                         可选 默认base context可用specific context
  flatten 只拷贝文件不管文件夹      默认是false
  ignore  忽略拷贝指定的文件           可以用模糊匹配
  ### 注意： 所以 在 static 目录下的文件，不会被压缩，直接打包到  dist  目标目录中，会增大size。

  3. webpack.ProvidePlugin
  webpack配置ProvidePlugin后，在使用时将不再需要import和require进行引入，直接使用即可。
  如 jquery echart lodash

三 webpack.prod.conf.js

  1. uglifyjs-webpack-plugin   用来对js文件进行压缩，从而减小js文件的大小，加速load速度。
  1.1 pure_funcs — 默认为null. 你可以传入一个名称的数组，而UglifyJs将会假定那些函数不会产生副作用.  危险: 如果名称在作用范围内被重新定义了就不会检查. 
  1.2 drop_debugger — 移除调试器和调试语句
  1.3 warnings — 当去掉不可达代码或者没有被使用的声明等东西时，显示警告.
  1.4 drop_console — 默认为false.  传入true会丢弃对console.函数的调用.
  1.4 sourceMap 设置false后可以禁止查看显示 Source Maps ，并且 打包后的 dist 不再生成 **.map.js 从而大大缩减size

2. extract-text-webpack-plugin  为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。

  3. CommonsChunkPlugin 代码分割/提取公共代码
      用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器。
  1.1 name：可以是已经存在的chunk（一般指入口文件）对应的name，那么就会把公共模块代码合并到这个chunk上；否则，会创建名字为name的commons chunk进行合并
  1.2 filename：指定commons chunk的文件名
  1.3 chunks：指定source chunk，即指定从哪些chunk当中去找公共模块，省略该选项的时候，默认就是entry chunks
  1.4 minChunks：既可以是数字，也可以是函数，还可以是Infinity，具体用法和区别下面会说

  4. compression-webpack-plugin 非常好用的压缩插件 算法 'gzip'