Webpack 复习小结

nodejs学习参考
node常用命令：
node xxx.js
执行js文件
npm init -y
初始化package.json
npm i 软件包名
下载软件包到本地
npm i 软件包名 -g
下载软件包到全局
npm uni 软件包名
删除软件包

系统优化CDN使用

CDN for free

需求：开发模式使用本地第三方库，生产模式下使用CDN加载引用
步骤：
1.在index.html文件中引入第三方CDN地址，并用模板语法判断
index.html

...
<% if(htmlWebpackPlugin.options.useCDN){ %>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js">script>
<% } %>
...
1
2
3
4
5

webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
      template: './public/index.html', // html模板文件
      filename: './index.html', // html输出文件名
      useCDN: process.env.NODE_ENV === 'production',
      favicon: './public/favorite.png'
  }),
],
1
2
3
4
5
6
7
8

2.配置webpack.config.js中externals外部扩展选项（防止某些import的包被打包）

/*生产模式下，排除掉 使用CDN引入加载的资源*/
if (process.env.NODE_ENV === 'production') {
    config.externals = {
        //key : import from 语句后面的字符串
        //value: 留在原地的全局变量（最好和CDN在全局暴露的变量一致）
        'axios': 'axios'
    }
}
1
2
3
4
5
6
7
8

多页面打包

未成功加载

开发环境调错

问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
source map ：可以准确追踪error和warning在原始代码中的位置
设置：webpack.config.js配置devtool选项

/*开发模式下使用devtool = inline-source-map，便于查找错误*/
if (process.env.NODE_ENV === 'development')
    config.devtool = 'inline-source-map'
1
2
3

inline-source-map选项：把源码的位置信息一起打包在js文件内
注意：source-map仅适用于开发环境，不要在生产环境使用(防止被轻易查看源码位置)

打包模式

打包模式：告知webpack使用响应的内置优化
开发模式：development 调试代码；实施加载；模块热替换等；适用于本地开发
生产模式：production 压缩代码；资源优化；更轻量；适用于打包上线

设置方式1：
package.json

"build": "webpack --mode=production",
"dev": "webpack serve --open --mode=development"
1
2

设置方式2：
webpack.config.js

const config = {
//mode: 'development',
mode: 'production',
}
1
2
3
4

命令行设置的优先级高于配置文件中的，推荐使用命令行设置

应用

需求：在开发模式下用style-loader内嵌，加载更快，再生产模式下提取css代码
借助cross-env（跨平台通用）包命令，设置参数区分环境
步骤：

1. 下载 cross-env软件包到当前项目
   npm i cross-env --save-dev
2. 配置自定义命令，传入参数名和值（会绑定到process.env对象下）

"build": "cross-env NODE_ENV=production webpack --mode=production",
"dev": "cross-env NODE_ENV=development webpack serve --open --mode=development"
1
2

3. 在webpack.config.js区分不同环境使用不同配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*css 分别打包*/
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/*css 代码压缩插件*/
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const webpack = require('webpack')

const config = {
    // mode: 'development',
    entry: {
        index: './src/main.js',
        // print: './src/print.js',
    },
    // devtool: 'inline-source-map',
    devServer: {
        /*默认以 public/index.html ，可以将dist目录启动为服务*/
        // static: './dist',
        //启动服务后自动弹出页面
        // open: true
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // use: [MiniCssExtractPlugin.loader, "css-loader"],
                /*开发模式下， 内嵌css样式，让热替换更快
                生产模式下提取css代码，让浏览器缓存 并行下载js和css文件*/
                use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                ],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html', // html模板文件
            filename: './index.html', // html输出文件名
            useCDN: process.env.NODE_ENV === 'production',
            favicon: './public/favorite.png'
        }),
        new MiniCssExtractPlugin({
        }),
        //允许在 编译时 将前端代码中的变量替换为其他值或表达式
        new webpack.DefinePlugin({
            // 定义...
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    optimization: {
        runtimeChunk: 'single',
        minimizer: [
            // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
            `...`,
            new CssMinimizerPlugin(),
        ],
    },
    /*配置别名变量*/
    resolve: {
        alias: {
            '@': path.join(__dirname, 'src')
        }
    }
}

/*开发模式下使用devtool = inline-source-map，便于查找错误*/
if (process.env.NODE_ENV === 'development')
    config.devtool = 'inline-source-map'

/*生产模式下，排除掉 使用CDN引入加载的资源*/
if (process.env.NODE_ENV === 'production') {
    config.externals = {
        //key : import from 语句后面的字符串
        //value: 留在原地的全局变量（最好和CDN在全局暴露的变量一致）
        'axios': 'axios'
    }
}
module.exports = config
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90