// webpack.dll.config.js
// 先通过DllPlugin 打包第三方文件
const path = require('path')
const webpack = require('webpack')
const vendors = [
'jquery',
'react',
'vue'
]
module.exports = {
context: path.resolve('./'),
entry: {
vendor: vendors
},
devtool: 'cheap-module-source-map',
output: {
path: path.join(__dirname, 'build'),
filename: '[name].[chunkhash].js',
library: '[name]_[chunkhash]'
},
plugins: [
/**
* DllPlugin : 打包公共文件 一般是第三方库
* 优点 :
1. Dll 打包以后是独立存在的 只要第三方库没有变化 就不用再重新打包Dll
2. App 部分代码打包 只需要编译app部分 Dll的内容 只要没有变化就不需要重新打包 这样每次
只需要打包第三方库 大大提高了编译的速度
3. 如果有多个项目 使用了相同的依赖库 它们可以共用一个 Dll (重新打包一次 也不费多少时间)
*/
new webpack.DllPlugin({
// Dll 文件的输出路径 .json名字可以随便取
path: './dll/manifest.json',
// Dll 文件名 可以随便取
name: '[name]_[chunkhash]',
})
],
watch: true
}
// DllReferencePlugin: 引用 DllPlugin 打包好的dll 文件打包其他文件
// 引入 DllPlugin 打包的 dll 主要是为了用 DllPlugin打包好的第三方文件
const path = require('path')
const webpack = require('webpack');
module.exports = {
context: path.resolve('./'),
entry: {
app: './app/index.js',
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].[chunkhash].js',
},
plugins: [
// DllReferencePlugin 配合 DllPlugin 打包好的 Dll使用
// 这里只需要引用 DllPlugin 生成好的 .json文件就可以了
new webpack.DllReferencePlugin({
// 这里用其他名字报错 manifest可以 不知道为什么 暂时就用 manifest
manifest: require('./dll/manifest.json'),
}),
],
watch: true
}
下载例子