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'