Webpack 配置詳解及實現過程

Webpack 配置詳解

1、打包升級

1.基礎打包配置

1. 開發模式(devtool)

demo_base版本

This option controls if and how source maps are generated.

開發建議使用eval模式，缺點是沒法正確顯示行號，想要正確顯示行號，能夠時候用source-map或者eval-source-map

生產環境： 建議使用cheap-module-source-map

2. 入口配置(entry)

string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] })

入口打包根場景不一樣，入口配置也不一樣。

• 單入口：

entry: './A/index.js'

entry: [
'./A/index.js',
],

• 多入口：

entry: [
'./A/index.js',
'./B/index.js'
],

entry: {
A: './A/index.js',
B: './B/index.js'
}

3. 輸出配置(output)

• 輸出路徑配置：

  output: {
      // path.resolve用來拼接文件多級目錄
      // __dirname 爲當前文件所在全路徑地址
      path: path.resolve(__dirname,'dist'), 
      // 輸出文件名字
     // filename: 'app.js', 
      // 以key做爲文件名輸出
      filename: '[name].js',
      // chunkhash 根據文件內容生成特色的hash，使用這個能夠保證文件內容不變，那麼文件名字就不會改變，能夠用來做爲熱更新
      chunkFilename: '[chunkhash].js'
  }

4. resolve

Configure how modules are resolved. For example, when calling import "lodash" in ES2015, the resolve options can change where webpack goes to look for "lodash" (see modules).

resolve: {
        // 當你reuire時，不須要加上如下擴展名
        extensions: ['.js', '.md', '.txt'],
      },

5. 插件(plugin)

plugins: [
    // Webpack 2之後內置
    // new webpack.optimize.OccurrenceOrderPlugin(),
    // 碰到錯誤warning可是不中止編譯
    new webpack.NoEmitOnErrorsPlugin(),
    // 開發模式不須要壓縮
    // new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
  ],

6. moudles

• babel-loader(用來作js代碼轉化)
• style-loader & css-loader(用來轉化css代碼)
• less-loader 轉化less文件
• raw-loader 把文件當作普通的文本文件讀取
• json-loader webpack 2之後就不須要配置了（內置了）
• file-loader 用來處理文件，能夠用url-loader代替，可是若是你資源文件是即時文件，那麼就使用fileload 指定一類對象做爲文件，而且返回一個public 的url，這樣能夠利用瀏覽器的線程來加載文件，減少bundle.js的大小。
• url-loader 用來處理eot|woff|woff2|ttf|svg|png|jpg這些文件，能夠防止加載資源文件致使頁面加載緩慢url-loader 使用limit來指定一個size，當文件的大小小於這個size的時候，對象將會轉化爲Dataurl，直接嵌入在js中.

2.多入口打多個包 （生成多個bundle.js）

這個是webpack 3.1.0新出來的配置方式,能夠用來解決多個入口文件，打包成多個文件夾的問題。

demo 將多個入口打成多個文件夾

module.exports = [{
  output: {
    filename: './dist-amd.js',
    libraryTarget: 'amd'
  },
  entry: './app.js',
}, {
  output: {
    filename: './dist-commonjs.js',
    libraryTarget: 'commonjs'
  },
  entry: './app.js',
}]

3.兼容多瀏覽器，添加postcss-loader（生產環境使用，增長build和rebuild時間）

demo 添加postcss

添加postcss-loader，須要作以下配置

webpack config 配置

插件配置

{
        test: /\.less/,
        use: [
          'style-loader',
          'css-loader',
+          'postcss-loader',
          'less-loader'
        ]
      },
      {
        test: /\.css$/,
-        use: 'style-loader!css-loader',
+        use: 'style-loader!css-loader!postcss-loader',
      },

.postcss.config.js文件配置

module.exports = {
  plugins: {
    'postcss-import': {}, // 可以使用import語法 @import "cssrecipes-defaults"; 
    'postcss-cssnext': {}, //PostCSS-cssnext是一個PostCSS插件，能夠幫助您使用最新的CSS語法。 它將CSS規範轉換爲更兼容的CSS，所以您不須要等待瀏覽器支持。
    'cssnano': {}
  }
}

4.css文件抽離 (生成環境使用，會增長build和rebuild時間)

demo css文件分離

webpack config 配置

插件配置

+const ExtractTextPlugin = require('extract-text-webpack-plugin');

+new ExtractTextPlugin('style.css'), //名字配置
    { 
        test: /\.less/,
_        use: [
_          'style-loader',
_          'css-loader',
_          'less-loader'
_        ]
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: ['css-loader', 'less-loader']
+        })
      },
      {
        test: /\.css$/,
-        use: 'style-loader!css-loader',
+         use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: ['css-loader']
+        })
      },

.postcss.config.js文件配置

module.exports = {
  plugins: {
    'postcss-import': {}, // 可以使用import語法 @import "cssrecipes-defaults"; 
    'postcss-cssnext': {}, //PostCSS-cssnext是一個PostCSS插件，能夠幫助您使用最新的CSS語法。 它將CSS規範轉換爲更兼容的CSS，所以您不須要等待瀏覽器支持。
    'cssnano': {}
  }
}

5.公共文件抽取 （抽取公共文件，能夠減小build與rebuild時間）

公共文件抽取通常依靠 CommonChunkPlguin 和 Dllplugin這兩個插件.

CommonChunkPlugin Demo

DllPlugin Demo

• 共同點：

  • 均可以抽出公共模塊

• 不一樣點：

  • CommonChunkPlguin

    1. CommonChunkPlguin能夠抽出多個模塊間公共模塊
    2. 配置了HtmlWebpackPlugin後，不須要手動在html中導入

  • dllPlugin

    1. dllPlugin 能夠在multi compliler（多個webpack config 文件） 中使用
    2. dllPlugin 生成的文件至關於獨立的存在，就像jQuery同樣，須要你在html進行引入以後才能使用。

CommonChunkPlugin 配置:

// 若是有其餘CommonsChunkPlugin生成的文件，將會引入
  // - If chunk has the name as specified in the chunkNames it is put in the list
  // - If no chunk with the name as given in chunkNames exists a new chunk is created and added to the list
 // 大概意思就是若是name在entry裏面有，那就加入一個列表，若是entry裏面沒有，
 // 那麼就建立一個新chunk列表,若是chunks裏面相同模塊代碼出現次數超過minChunks,那就添加到這個新建立的list裏面。
 new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      chunks: ["a", "b"], //須要合併的文件
      // minChunks:3 //最少在出現過多少次纔將其打入common中
    }),
    //若是
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity 
    })

DllPlugin 配置：

添加文件
const webpackConfig = {
  name: "vendor",
  entry: ["react", "react-dom"],
  output: {
    path: buildPath, // 輸出文件路徑
    filename: "vendor.js",
    library: "vendor_[hash]"
  },
  plugins: [
    new webpack.DllPlugin({
      name: "vendor_[hash]",
      path: path.resolve(buildPath, "manifest.json")
    })
  ]
};

name: "app",
+ dependencies: ["vendor"],
 devtool: 'eval',

+  new webpack.DllReferencePlugin({
+     manifest: path.resolve(buildPath, "manifest.json")
+    }),

6.文件分析(visualizer)

文件分析能夠插件能夠幫助查看咱們生成的bundle.js和chunk的組成成分，能夠根據這個進行代碼優化。（開發環境使用）

+    const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
+    const Visualizer = require('webpack-visualizer-plugin');

+   new StatsWriterPlugin({
+      fields: null,
+      stats: { chunkModules: true }
+    }),
+    new Visualizer({
+      filename: './statistics.html' // visualizer 文件名稱，在output 設置的path文件夾能夠找到
+    })

7.DefinePlugin(生產環境配置能夠減小文件體積)

這個減小文件體積是相對的，webpack打包的時候回刪去無用的代碼，而react-dom等一些文件中都有不少下面的代碼形式，這樣webpack 和 DefinePlugin插件配合能夠減小部分文件體積

if (process.env.NODE_ENV !== 'production') {}

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
}),

8.OccurrenceOrderPlugin內置加入，不須要配置

9.UglifyJsPlugin（壓縮文件，減少文件體積，生產環境使用）

webpack 自己內置uglifyjs,若是你想控制uglifyjs的版本，可使用這個。

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 new uglifyJsPlugin({
      compress: {
        warnings: false
      }
    })

10.熱替換配置(開發環境自動刷新)

篇幅過大，移至此文章