動態鏈接庫
不重複打包某些不會變動的文件,加快我們的打包速度
使用webpack的DllPlugin和DllReferencePlugin插件
webpack.ddl.config.js
let path = require('path');
let webpack = require('webpack');
module.exports = {
mode: 'development',
entry: {
react: ['react', 'react-dom']
},
output: {
filename: '_dll_[name].js',
path: path.resolve(__dirname, 'dist'),
library: '_dll_[name]',
},
plugins: [
new webpack.DllPlugin({
name: '_dll_[name]',
path: path.resolve(__dirname, 'dist', 'manifest.json'),
})
]
};
webpack.config.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let webpack = require('webpack');
module.exports = {
entry: './src/index.js',
mode:'development',
devServer: {
port: 3000,
open: true,
contentBase: './dist',
},
module: {
// noParse: /jquery/, // 不去解析jquery中的依賴關係,
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve('./src/'),
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
]
}
}
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dist', 'manifest.json'),
}),
new webpack.IgnorePlugin(/\.\/locale/, /moment/),
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
}),
]
};