转载请注明 来源:http://www.eword.name/
Author：eword
Email:[email protected]
webpack生产环境优化：dll
- dll动态链接库
- 目的：单独的将多个指定的第三方库打包成一个chunk。
- 意义：将不同的库分割开来，实现代码分割和避免重复打包，在节省打包时间的同时方便按需加载和预加载的实现。
一、打包指定的第三方库
1.1、创建dll打包配置文件
根目录下创建
webpack.dll.js配置文件
/*
路径：./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'
}
1.2、打包dll
# 根据webpack.dll.js配置的内容打包
> webpack --config webpack.dll.js
1.3、工程文件目录
.
├── dll // 打包后生成的目录
│ ├── jquery.js // 根据webpack.dll.js配置独立打包出来的jquery
│ └── manifest.json //映射文件
├── src
│ ├── index.html
│ └── index.js
├── webpack.config.js
└── webpack.dll.js //打包配置文件
二、应用单独打包的dll
2.1、修改webpack.config.js
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入webpack
const webpack = require('webpack');
// 引入add-asset-html-webpack-plugin
const AddAssetHtmlWebpackPlugin =require('add-asset-html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起点文件
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 详细loader配置
//不同文件必须配置不同loader处理
// 打包 css 文件的详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
],
},
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less-loader和less
'less-loader'
]
},
]
},
// plugins的配置
plugins: [
// 详细的plugins配置
// 详细的plugins配置
// html-webpack-plugin
// new HtmlWebpackPlugin() 功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
//需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
//复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
template: './src/index.html'
}),
// 告诉webpack哪些库不参与打包，同时使用时的名称也得变~
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/manifest.json')
}),
// 将某个dll文件打包输出去，并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.js')
})
],
// 模式 development 开发环境，production 生产环境
mode: 'development',
// 生产环境下会自动压缩js代码
// mode: 'production'
};
核心配置
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
……
// 引入webpack
const webpack = require('webpack');
// 引入add-asset-html-webpack-plugin
const AddAssetHtmlWebpackPlugin =require('add-asset-html-webpack-plugin');
……
// plugins的配置
plugins: [
// 详细的plugins配置
// 告诉webpack哪些库不参与打包，同时使用时的名称也得变~
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/manifest.json')
}),
// 将某个dll文件打包输出去，并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.js')
})
],
webpack.DllReferencePlugin：独立打包的dll库，不在打包到输出的chunk中。
AddAssetHtmlWebpackPlugin：在html中引入指定独立打包的dll库资源，并将该资源独立打包出去。
2.2、其他工程文件
<!-- ./src index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<h1 id="title">hello dll</h1>
</body>
</html>
// 入口文件
// ./src/index.js
import { $ } from 'jquery';
console.log($);
2.3、构建打包
> npx webpack
2.4、工程文件目录
.
├── build //构建打包生成的目录
│ ├── built.js
│ ├── index.html
│ └── jquery.js //独立打包，并在html中被引入的jquery库资源
├── dll // 打包后生成的目录
│ ├── jquery.js // 根据webpack.dll.js配置独立打包出来的jquery
│ └── manifest.json //映射文件
├── src
│ ├── index.html
│ └── index.js // 入口文件，使用jquery包
├── webpack.config.js
└── webpack.dll.js //打包配置文件
// 入口文件
// ./src/index.js
import { $ } from 'jquery';
console.log($);
<!-- 生成的 index.html 文件，./build/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<h1 id="title">hello dll</h1>
<script src="built.js"></script>
<!-- AddAssetHtmlWebpackPlugin 插件引入的资源 -->
<script src="jquery.js"></script>
</body>
</html>