深入淺出的webpack構建工具---AutoDllPlugin外掛(八)

龍恩0707發表於2018-08-23
WebPlugin

深入淺出的webpack構建工具---AutoDllPlugin外掛(八)

    DllPlugin外掛能夠快速打包，能把第三方依賴的檔案能提前進行預編譯打包到一個檔案裡面去。提高了構建速度。因為很多第三方外掛我們並不需要改動它，所以我們想這些第三方庫在我們每次編譯的時候不要再次構建它就好。因此 DLLPlugin外掛就產生了，那麼現在有DLLPlugin外掛，我們現在為什麼還需要一個AutoDllPlugin外掛呢？該外掛的具體的作用是什麼呢？ 

我們從上一篇文章DllPlugin 可以看到，DllPlugin構建dll的js檔案後，在index.html需要手動引入dll檔案，因為HtmlWebpackPlugin外掛不會把dll.js檔案自動打包到頁面上去，它只會對bundle.js自動引入進去，因此AutoDllPlugin外掛就是來解決這個問題的。
因此推薦 AutoDllPlugin HtmlWebpackPlugin，這兩個外掛一起使用，因為它可以節省手動將DLL包新增到自己的HTML中。

1. 首先需要安裝命令如下：
如果是webpack4以下的版本：如下命令安裝：

npm install --save-dev autodll-webpack-plugin@0.3

如果是webpack4版本的話，如下命令安裝：

npm install --save-dev autodll-webpack-plugin

我這邊是webpack4版本，所以如下命令安裝：

npm install --save-dev autodll-webpack-plugin

在webpack.config.js 使用方式如下：

// 引入打包html檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 autodll-webpack-plugin
const AutoDllPlugin = require('autodll-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './index.html' // 模版檔案
    }),
    new AutoDllPlugin({
      inject: true,
      filename: '[name]_[hash].js',
      entry: {
        vendor: [
          'jquery'
          // .... 更多外掛
        ]
      }
    })
  ]
}

因此webpack中所有配置程式碼如下：

const path = require('path');
// 提取css的外掛
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 清除dist目錄下的檔案
// const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html檔案
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

// 引入 autodll-webpack-plugin
const AutoDllPlugin = require('autodll-webpack-plugin');

module.exports = {
  // 入口檔案
  entry: {
    main: './js/main.js'
  },
  output: {
    filename: '[name].bundle.js',
    // 將輸出的檔案都放在dist目錄下
    path: path.resolve(__dirname, 'dist'),
    publicPath: './'
  },
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: path.resolve(__dirname, 'node_modules'), // 排除檔案
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.json']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  mode: 'development',
  plugins: [
    // new ClearWebpackPlugin(['dist']),
    new ExtractTextPlugin({
      // 從js檔案中提取出來的 .css檔案的名稱
      filename: `main.css`
    }),
    new HtmlWebpackPlugin({
      inject: true,
      template: './index.html' // 模版檔案
    }),
    new AutoDllPlugin({
      inject: true,
      filename: '[name]_[hash].js',
      entry: {
        vendor: [
          'jquery'
          // .... 更多外掛
        ]
      }
    })
  ]
};

更多的配置項，請看官網

git上檢視程式碼

注意：這裡不需要 webpack.dll.config.js檔案

相關文章