Webpack3全面解析

一、基本概念

Webpack是一個模塊打包器，通過構建一個依賴關係圖，將所有需要的資源打包成一個或多個bundle文件，提供給瀏覽器使用。其中模塊可以是JavaScript文件、CSS文件、圖片等等任何形式的資源。

Webpack的核心是一些如loader、plugin等的插件模塊，可以進行預處理、壓縮、轉換、跨域等等各種複雜的操作。

二、使用步驟

1. 安裝webpack和webpack-cli

npm install webpack webpack-cli --save-dev

2. 編寫webpack.config.js文件

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

3. 運行webpack打包

npx webpack

三、devtool

devtool屬性可以控制打包後的代碼的調試工具，是調試時一個非常重要的參數。

1. source-map

生成一個source-map文件，可以在瀏覽器中直接進行調試，打包時速度會比較慢。

module.exports = {
  devtool: 'source-map'
};

2. cheap-source-map

生成一個壓縮之後的source-map文件，速度比較快。

module.exports = {
  devtool: 'cheap-source-map'
};

3. eval-source-map

生成一個source-map code URL，速度最快，但是可能有安全問題。

module.exports = {
  devtool: 'eval-source-map'
};

四、loader和plugin

1. loader

通過loader模塊，我們可以對各種類型的文件進行處理。比如對於CSS文件，我們可以使用css-loader進行處理，將其轉化為JavaScript代碼，再使用style-loader插入到html中。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

2. plugin

Plugin在Webpack構建過程中會廣泛應用，一個Plugin的功能往往會涉及到Webpack自身的多個生命周期。比如，我們可以用uglifyjs-webpack-plugin來進行代碼壓縮。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
};

五、代碼分離

Webpack可以將代碼分成多個塊，每一個塊被打成一個文件。

1. entry

在entry中配置多個入口，每個入口都會生成一個chunk。

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

2. optimization.splitChunks

通過optimization.splitChunks配置可以實現更高級的代碼分離。具體來說，它可以將多個入口chunk中的公共部分提取出來，生成一個單獨的chunk文件。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async'
    }
  }
};

六、Hot Module Replacement

Hot Module Replacement可以在不刷新瀏覽器的情況下，自動替換頁面上的已經被修改的模塊。

const webpack = require('webpack');

module.exports = {
  devServer: {
    hot: true,
    contentBase: './dist'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

七、結語

Webpack3是一個非常強大的模塊打包工具，通過熟練掌握Webpack3的各種配置、loader、plugin等模塊，可以輕鬆構建出高質量的前端項目。