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:8]' //打包的库里面向外面暴露出去的内容叫什么名字
},
plugins:[
// 打包生成一个 manifest.json --> 提供和jquery映射
new webpack.DllPlugin({
name:'[name]_[hash:8]', //映射库的暴露的内容名称
path:resolve(__dirname,'dll/manifest.json') //输出文件路径
})
],
mode:'production'
}
const { resolve } = require('path');
const HtmlWepbackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
entry:'./src/index.js',
output:{
filename:'built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
{
}
]
},
plugins:[
new HtmlWepbackPlugin({
// template:'./src/index.html'
}),
// 告诉webpack那些库不参与打包,同时使用时的名称也得变~
new webpack.DllReferencePlugin({
manifest:resolve(__dirname,'dll/manifest.json')
}),
// 将某个文件打包输出去,并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
// filepath:resolve(__dirname,'dll/jquery.js'),
filepath:require.resolve('./dll/jquery.js'),
outputPath: 'dll',
attributes: {
nomodule: false,
},
})
],
mode:'production'
}