深入淺出的webpack構建工具---AutoDllPlugin插件(八)

深入淺出的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文件