webpack生产环境优化：dll

转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name

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>