vue-cli中设置webpack系列文章八 ------ 工程经常使用设置

2024年2月2日 138次阅读 来源: 亲爱的阿干

一 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'
    原文作者：亲爱的阿干
    原文地址: https://segmentfault.com/a/1190000019232068
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞