- 需要安装的插件有
extract-text-webpack-plugin
assets-webpack-plugin
clean-webpack-plugin
npm install extract-text-webpack-plugin assets-webpack-plugin clean-webpack-plugin --save-dev
- 配置文件
在 build 文件夹中新建 buildDll.js
var path = require('path');
var utils = require('./utils')
var webpack = require('webpack');
var config = require('../config')
var utils = require('./utils')
var dllConfig = require('./webpack.dll.conf');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin');
var chalk = require('chalk')
var rm = require('rimraf')
var ora = require('ora')
var spinner = ora({
color: 'green',
text: 'Dll生产中...'
})
spinner.start()
rm(path.resolve(__dirname, '../static'), err => {
if (err) throw err
webpack(dllConfig,function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
console.log(chalk.cyan(' dll succeed ！.\n'))
})
});
在 build 文件夹中新建 webpack.dll.conf
var path = require('path');
var webpack = require('webpack'); //调用webpack内置DllPlugin插件
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 提取css
var AssetsPlugin = require('assets-webpack-plugin'); // 生成文件名，配合HtmlWebpackPlugin增加打包后dll的缓存
var CleanWebpackPlugin = require('clean-webpack-plugin');//清空文件夹
module.exports = {
entry: {
libs: [
'vue/dist/vue.esm.js',
'vue-router',
'vuex',
'js-md5',
'js-cookie',
'./src/assets/fastclick',
'./src/assets/base',
'./src/assets/flexible',
// './src/assets/reset_for_mobile.css',
'./src/assets/localResizeIMG',
'./src/assets/qrious',
'./src/assets/sign',
'./src/assets/uid',
'./src/assets/uuid',
// 'element-ui',
// 'element-ui/lib/theme-default/index.css',
// 'mint-ui',
// 'mint-ui/lib/style.css',
]
},
output: {
path: path.resolve(__dirname, '../static'),
filename: '[name].[chunkhash:7].js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname, '../static/[name]-mainfest.json'),
name: '[name]_library',
context: __dirname // 执行的上下文环境，对之后DllReferencePlugin有用
}),
new ExtractTextPlugin('[name].[contenthash:7].css'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
}),
new AssetsPlugin({
filename: 'bundle-config.json',
path: './static'
}),
new CleanWebpackPlugin(['static'], {
root: path.join(__dirname, '../'), // 绝对路径
verbose: true, // 是否显示到控制台
dry: false // 不删除所有
}),
],
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
minimize: true //启用压缩
}
}]
})
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
}]
},
}
修改webpack.base.conf.js
...
//新增
//引入webpack
var webpack = require('webpack');
module.exports = {
entry: {
...
},
output: {
...
},
externals: {
...
},
resolve: {
...
},
module: {
...
},
//新增
// 添加DllReferencePlugin插件
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('../static/libs-mainfest.json') // 指向生成的manifest.json
}),
]
}
修改webpack.dev.conf
...
//新增
var bundleConfig = require("../static/bundle-config.json")//调入生成的的路径json
...
module.exports = merge(baseWebpackConfig, {
module: {
...
},
devtool: '#cheap-module-eval-source-map',
plugins: [
...
new HtmlWebpackPlugin({
...
//新增
libJsName:bundleConfig.libs.js,
libCssName:bundleConfig.libs.css,
env:config.dev.env,
}),
...
]
})
修改webpack.prod.conf
...
//新增
var bundleConfig = require("../static/bundle-config.json")//调入生成的的路径json
var CleanWebpackPlugin = require('clean-webpack-plugin');//清空文件夹
...
var webpackConfig = merge(baseWebpackConfig, {
module: {
...
},
...
output: {
...
},
plugins: [
...
new HtmlWebpackPlugin({
...
//新增
libJsName: bundleConfig.libs.js,
libCssName: bundleConfig.libs.css,
...
}),
...
//新增
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../'), // 设置绝对路径
verbose: true,
dry: false
}),
...
]
})
...
在index.html引入生成的dll.js、dll.css
...
<body>
<div id="app"></div>
<!-- 新增 -->
<link rel="stylesheet" href="./static/<%= htmlWebpackPlugin.options.libCssName %>">
<script src="./static/<%= htmlWebpackPlugin.options.libJsName %>"></script>
</body>
...
修改package.json
{
...
"scripts": {
...
//新增
"build:dll": "node build/buildDll.js",
...
},
...
}
注意:
无论是开发环境还是生产环境，都必须先运行 npm run build:dll
dll文件打包的第三方库没有改变时，不需要再次运行