webpack实用小功能介绍(2)

日期：2020-05-11 栏目：程序人生浏览：次

是不是很简单却很实用呢~

4.DllPlugin+DllReferencePlugin

在使用webpack开发的过程中，相信很多人都会觉得有时候项目启动编译时间等待太久了，为什么呢？因为当项目慢慢庞大起来的时候，我们依赖的模块越来越多，每次项目启动编译都需要全部编译打包，所以自然会导致编译时间偏长，那如何解决这个问题呢？

首先思路是这样的，一般node_modules文件中的依赖，基本上是不会去做改变的，所以没有必要每次都去进行打包，我们完全可以将这些依赖提前打包好，然后就可以一直使用了。

DllPlugin就是用来提前打包我们的依赖包的插件。DllPlugin分为两个插件，一个是DllPlugin，另一个是DllReferencePlugin。

首先DllPlugin的作用是用来提前打包好依赖，步骤如下：

新建一个vendor.js，用来引入所有我们依赖的模块：

import Vue from 'vue';
import ElementUI from 'element-ui';
import VouRouter from 'vue-router';

新建一个webpack.config.dll.js的配置文件，配置如下：

const path = require('path');
const webpack = require('webpack');
module.exports = {
 entry: {
  vendor: [path.resolve(__dirname, 'vendor')]
 },
 output: {
  path: path.resolve(__dirname, './dll'),
 filename: 'dll.[name].js',
 library: '[name]'
 },
 plugins: [
 new webpack.DllPlugin({
 path: path.join(__dirname, "./dll", "[name]-manifest.json"),
 name: "[name]"
 })
 ],
 resolve: {
 extensions: ['js']
 }

配置好了以后，就可以到终端里运行webpack --config webpack.config.dll.js了，然后就能在你的dist/dll目录下看到一个dll.vendore.js和一个vendor-manifest.json文件，到此DllPlugin提取依赖的作用就完成了。

下面是DllReferencePlugin的配置，这个配置更简单，找到项目原本的webpack.config.js文件，然后配置如下：

module.exports = {
 plugins: [
  new webpack.DllReferencePlugin({
   context: path.join(__dirname, "src"),
   manifest: require("./dll/vendor-manifest.json")
  })
 ]
}

这样就都配置好了，但是这样做还存在个问题，当你运行项目时，会提示：

You are using the runtime-only build of Vue...

大概的意思就是说因为你使用了vue的template，使用的vue版本不对，所以我在webpack.config.dll.js里面对vue做如下设置：

alias: {
 'vue$': 'vue/dist/vue.common.js'
}

否则会默认打包vue.runtime.common.js，正确的应该是打包vue.common.js这个文件。做了以上配置以后，本以为就OK了，但还是太天真，依旧还是报了一样的错误。

然后我到webpack.config.js里面做了同样的配置，结果就OK了。但是这会导致vue被打包了两份，所以暂时只能放弃在vendor内引入vue了，导致该问题的原因暂不明了。

webpack实用小功能介绍(2)

相关推荐