webpack4 dll动态链接库打包第三方库
好处:(1)dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。(2)App部分代码修改后,只需要编译app部分的代码,dll部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度。(3)假设你有多个项目,使用了相同的一些依赖库,它们就可以共用一个dll。(4)之前将第三方库代码和源代码分离形成一
·
好处:
(1)dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。
(2)App部分代码修改后,只需要编译app部分的代码,dll部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度。
(3)假设你有多个项目,使用了相同的一些依赖库,它们就可以共用一个dll。
(4)之前将第三方库代码和源代码分离形成一个js文件,而它能把第三方库代码分离开,并且每次文件更改的时候,只会打包该项目自身的代码。所以打包速度会更快。
1、下载
cnpm install -D add-asset-html-webpack-plugin
2、创建webpack.dill.js(文件名任意),通过webpack.DllPlugin将第三方库分离成单独文件,并生成manifest.json映射文件和分离的第三方库
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
jquery: ['jquery'], 库名:['相关的库'],如:react:['react','react-dom']
},
output: {
filename: '[name].js', [name]对应entry中的键名
path: path.resolve(__dirname, 'dll'),
library:'[name]_[hash]', 打包的库中向外暴露的内容,需要与 DllPlugin 插件中的 name 属性值对应起来
},
plugins: [
new webpack.DllPlugin({ manifest.json提供映射文件,提供和库的映射关系,即不需要打包的库名
path: path.resolve(__dirname, 'dll/manifest.json'),
name: '[name]_[hash]', 映射库的暴露内容
}),
],
mode:'production'
}
3、配置webpack.config.js
const webpack = require('webpack')
const AddAssetHtmlWebpackPlugin=require('add-asset-html-webpack-plugin')
plugins:[
new webpack.DllReferencePlugin({ 根据映射关系查找不参与打包的库,即不会引入该资源
manifest: path.resolve(__dirname,'dll/manifest.json') 下面这个地址对应webpack.dll.config.js中生成的那个json文件的路径
}),
new AddAssetHtmlWebpackPlugin({ 在html中引入资源,并打包成单独文件
filepath: path.resolve(__dirname, 'dll/jquery.js'), 引入2步中分离的库
outputPath:'src/js' 输出路径,不写默认为根目录
})
引入多个文件写法:
new AddAssetHtmlWebpackPlugin([
{ filepath: require.resolve('./some-file') },
{ filepath: require.resolve('./some-other-file') },
Glob to match all of the dll file
{ filepath: require.resolve('./**/*.dll.js') },
]);
]
4、打包:
先webpack --config webpack.dll.js
再webpack
代码示例:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin= require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const AddAssetHtmlWebpackPlugin=require('add-asset-html-webpack-plugin')
// process.env.NODE_ENV='development'
// console.log(this.mode)
module.exports = {
entry: ['./src/js/index.js','./src/index.html'],
// entry: {
// main: './src/js/index.js',
// test: './src/js/print.js',
// // html:'./src/index.html'
// },
output: {
// 'src/js/build.[contenthash:10].js'
filename: 'src/js/[name].[contenthash:10].js',
path:path.resolve(__dirname,'build')
},
module: {
rules: [//创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。
{
test: /\.css$/, //匹配文件名
use: [//使用哪些loader
// 'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
MiniCssExtractPlugin.loader, //取代style-loader,提取js中的css为单独文件
'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
{
loader: 'postcss-loader',
ident: 'postcss',
options: {
postcssOptions: {
plugins: [['postcss-preset-env',{}]]
},
}
}
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader', //将less文件编译成css文件
]
},
{
test: /\.(jpg|png|gif|jfif)$/,
loader:'url-loader', //依赖于file-loader
options: {
//图片小于8kb,会处理成base64,即减少请求数量,增大图片体积(请求速度会变慢cn)
limit: 8 * 1024,
esModule: false, //不采用es6模式解析,否则会和html-loader采用的commonjs模式冲突
name: '[name].[ext]',
outputPath:'src/images'
}
},
{
test: /\.html$/,
loader:'html-loader', //处理html文档中的img,负责引入图片,交给url-loader处理
},
{
// exclude:/\.xx$/
test: /\.(ttf|eot|svg|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath:'src/icon'
},
},
{//不检查node_modules
test: /\.js$/,
exclude:/node_modules/,
loader: 'eslint-loader',
enforce:'pre', //优先执行
options: {
fix: true,
}
},
{//js兼容性处理
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [
'thread-loader', //开启多进程打包
{
loader: 'babel-loader',
options: {
// 预设,指示babel做兼容性处理
presets: [['@babel/preset-env', {
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge:'19'
},
useBuiltIns: 'usage', //按需加入
corejs: { //指定core-js版本
version:3
}
}]],
cacheDirectory:true //开启缓存
// plugins: ['@babel/transform-runtime']
}
}
]
}
]
},
//插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', //将模板复制成指定文件
minify: {
collapseWhitespace: true, //折叠空格
removeComments:true //移出注释
}
}), //默认传键html文件,并引入打包输出的资源,默认为基本结构
new MiniCssExtractPlugin({
filename: 'src/css/build.[contenthash:10].css'
}),
new OptimizeCssAssetsPlugin(),
new CleanWebpackPlugin(),
new WorkboxPlugin.GenerateSW({ //生成serviceworker
clientsClaim: true, //帮助serviceworker快速启动
skipWaiting: true, //删除旧的serviceworker
}),
new webpack.DllReferencePlugin({ //根据映射关系查找不参与打包的库,即不会引入该资源
manifest: path.resolve(__dirname,'dll/manifest.json') // 下面这个地址对应webpack.dll.config.js中生成的那个json文件的路径
}),
new AddAssetHtmlWebpackPlugin({ //在html中引入资源
filepath: path.resolve(__dirname, 'dll/jquery.js'),
outputPath:'src/js'
})
],
// optimization: {
// splitChunks: {
// chunks: 'all', //将node_modules内库单独打包
// }
// },
mode: 'production',
//自动化,自动编译、打开浏览器和自动刷新等
devServer: {
// contentBase:['xx','xx',...]
contentBase: path.resolve(__dirname, 'build'), //提供内容的目录
//启动gzip压缩
compress: true,
port: 3000, //监听端口号
open: true, //自动打开浏览器
hot:true,
},
// devtool:'source-map'
// externals: {
// jquery:'jQuery'
// }
}
webpack.dll.js:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
jquery: ['jquery']
//库名:['相关的库'],如:react:['react','react-dom']
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dll'),
library:'[name]_[hash]', //打包的库中向外暴露的内容,需要与 DllPlugin 插件中的 name 属性值对应起来
},
plugins: [
new webpack.DllPlugin({ //manifest.json提供映射文件,提供和库的映射关系,即不需要打包的库名
path: path.resolve(__dirname, 'dll/manifest.json'),
name: '[name]_[hash]', //映射库的暴露内容
// context: __dirname, //manifest (或者是内容属性)中请求的上下文
}),
],
mode:'production'
}
更多推荐
已为社区贡献3条内容
所有评论(0)