webpack.dll.js
/**
* 使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包
* 当你运行 webpack 时，默认查找 webpack.config.js 配置文件
* 需求：需要运行 webpack.dll.js 文件
* --> webpack --config webpack.dll.js
*/ const { resolve } = require('path')
const webpack = require('webpack') module.exports = {
entry: {
// 最终打包生成的[name] --> jquery
// ['jquery] --> 要打包的库是jquery
jquery: ['jquery']
},
output: {
filename: '[name].js',
path: resolve(__dirname, 'dll'),
library: '[name]_[hash]', // 打包的库里面向外暴露出去的内容叫什么名字
},
plugins: [
// 打包生成一个 manifest.json --> 提供和jquery映射
new webpack.DllPlugin({
name: '[name]_[hash]', // 映射库的暴露的内容名称
path: resolve(__dirname, 'dll/manifest.json') // 输出文件路径
})
],
mode: 'production'
}
webpack.config.js
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
module.exports = {
entry: resolve(__dirname, 'src/index.js'),
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
mode: {
rules: [
// loader的配置
]
},
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, 'src/index.html')
}),
// 告诉webpack哪些库不参与打包，同时使用时的名称也得变~
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/manifest.json')
}),
// 将某个文件打包输出去，并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath:resolve(__dirname, 'dll/jquery.js')
})
],
mode: 'production'
}
