简介

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

核心概念

Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)

Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

Mode

模式(Mode)指示 webpack 使用相应模式的配置。

常见配置

安装

1
npm init
2
npm install webpack webpack-cli -g   全局安装webpack
3
npm install webpack webpack-cli -D

配置

无配置打包

开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development

功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。

生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production

配置环境

webpack是node写出来，所以需要使用node的语法

即引入文件的时候使用CommonJS规范的require引入，而不能使用ES6的import引入。

loader

loader执行顺序从下到上，从右到左。

css

如果要在打包中用到css就需要使用到这个loader。

1
npm i css-loader style-loader -D
2
npm install --save-dev mini-css-extract-plugin css-loader

1
test: /\.css$/,
2
// 使用哪些 loader 进行处理
3
use: [
4
    // use 数组中 loader 执行顺序：从右到左，从下到上 依次执行
5
    // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
6
    'style-loader',
7
    // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
8
    'css-loader'
9
]

1
module: {
2
    rules: [
3
        {
4
        test: /\.css$/,
5
            use: [
6
                // 创建 style 标签，将样式放入
7
                // 'style-loader',
8
                // 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件
9
                MiniCssExtractPlugin.loader,
10
                // 将 css 文件整合到 js 文件中
11
                'css-loader'
12
            ]
13
        }
14
    ]
15
}
16
plugins: [
17
    new HtmlWebpackPlugin({
18
      template: './src/index.html'
19
    }),
20
    new MiniCssExtractPlugin({
21
      // 对输出的 css 文件进行重命名
22
      filename: 'css/built.css'
23
    })
24
],

兼容性处理

1
npm install --save-dev postcss-loader postcss-preset-env

1
use: [
2
    MiniCssExtractPlugin.loader,
3
    'css-loader',
4
    {
5
        loader: 'postcss-loader',
6
        options: {
7
            ident: 'postcss',
8
            plugins: () => [
9
                // postcss 的插件
10
                require('postcss-preset-env')()
11
            ]
12
        }
13
    }
14
]

修改package.json

1
"browserslist": {
2
    "development": [
3
        "last 1 chrome version",
4
        "last 1 firefox version",
5
        "last 1 safari version"
6
    ],
7
    "production": [
8
        ">0.2%",
9
        "not dead",
10
        "not op_mini all"
11
    ]
12
}

提取成单独文件。

1
npm install --save-dev mini-css-extract-plugin

less

如果想在项目中使用less就需要这个loader。

1
npm i less-loader less -D

图片资源

打包的时候引用到的图片的打包方式。

1
npm install --save-dev html-loader url-loader file-loader

1
test: /\.(jpg|png|gif)$/
2
loader: "url-loader",
3
options: {
4
    // 图片大小小于 8kb，就会被 base64 处理
5
    // 优点: 减少请求数量（减轻服务器压力）
6
    // 缺点：图片体积会更大（文件请求速度更慢）
7
    limit: 8 * 1024,
8
    // 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
9
    // 解析时会出问题：[object Module]
10
    // 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
11
    esModules: false,
12
    // 给图片进行重命名
13
    // [hash:10]取图片的 hash 的前 10 位
14
    // [ext]取文件原来扩展名
15
    name: "[hash:10].[ext]"
16
}

其他资源

即除了制定的资源以外的资源的打包方式。

1
{
2
    // 排除 css/js/html 资源
3
    exclude: /\.(css|js|html|less)$/,
4
    loader: 'file-loader',
5
    options: {
6
    name: '[hash:10].[ext]'
7
    }
8
}

plugins 插件

HTML

1
npm install --save-dev html-webpack-plugin

1
// plugins 的配置
2
// html-webpack-plugin
3
// 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
4
// 需求：需要有结构的 HTML 文件
5
new HtmlWebpackPlugin({
6
        // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
7
        template: './src/index.html'
8
})

压缩

1
new HtmlWebpackPlugin({
2
    template: './src/index.html',
3
    // 压缩 html 代码
4
    minify: {
5
    // 移除空格
6
    collapseWhitespace: true,
7
    // 移除注释
8
    removeComments: true
9
    }
10
})

压缩CSS

1
npm install --save-dev optimize-css-assets-webpack-plugin

使用方法：

直接在插件处添加：

new OptimizeCssAssetsWebpackPlugin()

js

语法检查eslint，如果要多人合作开发项目或者开发一个大型项目，eslint非常有必要，它不仅可以检测出代码中潜在的一些BUG，还可以将代码的风格进行统一。

1
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

1
/*语法检查： eslint-loader eslint
2
注意：只检查自己写的源代码，第三方的库是不用检查的
3
设置检查规则：
4
package.json 中 eslintConfig 中设置~
5
"eslintConfig": {
6
"extends": "airbnb-base"
7
}
8
airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
9
*/
10
{
11
    test: /\.js$/,
12
    exclude: /node_modules/,
13
    loader: 'eslint-loader',
14
    options: {
15
    // 自动修复 eslint 的错误
16
        fix: true
17
    }
18
}

修改package.json

1
"eslintConfig": {
2
  "extends": "airbnb-base",
3
  "env": {
4
    "browser": true
5
  }

兼容性处理

在不同的浏览器中，js支持的语法可能也不相同，所以可以指示 babel 做怎么样的兼容性处理。

1
npm install --save-dev babel-loader @babel/core @babel/polyfill core-js @babel/preset-env

1
{
2
    test: /\.js$/,
3
    exclude: /node_modules/,
4
    loader: 'babel-loader',
5
    options: {
6
        // 预设：指示 babel 做怎么样的兼容性处理
7
        presets: [
8
            [
9
                '@babel/preset-env',
10
                {
11
                    // 按需加载
12
                    useBuiltIns: 'usage',
13
                    // 指定 core-js 版本
14
                    corejs: {
15
                        version: 3
16
                    },
17
                    // 指定兼容性做到哪个版本浏览器
18
                    targets: {
19
                        chrome: '60',
20
                        firefox: '60',
21
                        ie: '9',
22
                        safari: '10',
23
                        edge: '17'
24
                    }
25
                }
26
            ]
27
        ]
28
    }
29
}

生产环境会自动压缩js代码

每次打包自动删除

1
npm install --save-dev clean-webpack-plugin

devserver

如果使用webpack，则每次修改了代码就需要重新进行打包，但是devserver可以实现在你修改代码之后，自动为你打包运行，并且可以模拟出一个服务器。

运行：

1
npx webpack-dev-server

使用：

1
devServer: {
2
    // 项目构建后路径
3
    contentBase: resolve(__dirname, 'build'),
4
    // 启动 gzip 压缩
5
    compress: true,
6
    // 端口号
7
    port: 3000,
8
    // 自动打开浏览器
9
    open: true
10
}

环境优化

HMR

HMR:hot module replacement 热模块替换/模块热替换作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）极大提升构建速度。
样式文件：可以使用HMR功能：因为style-loader内部实现了。
。js文件：默认不能使用HMR功能。
html文件：默认不能使用HMR功能.同时会导致问题：html文件不能热更新了解决：修改entry入口，将html文件引入。

source-map

devtool: "eval-source-map"：一种提供源代码到构建后代码映射技术，即如果代码出现报错，是否会指向源代码中错误的哪一行。

source-map：外部

错误代码准确信息和源代码的错误位置

inline-source-map：内联

只生成一个内联source-map
错误代码准确信息和源代码的错误位置

hidden-source-map：外部

错误代码错误原因，但是没有错误位置
不能追踪源代码错误，只能提示到构建后代码的错误位置

eval-source-map：内联

每一个文件都生成对应的source-map，都在eval错误代码准确信息和源代码的错误位置

nosources-source-map：外部

错误代码准确信息，但是没有任何源代码信息

cheap-source-map：外部

错误代码准确信息和源代码的错误位置只能精确到行

cheap-module-source-map：外部

错误代码准确信息和源代码的错误位置

开发环境

速度快，调试更友好

速度快（eval>inline>cheap>...）

eval-cheap-souce-map
eval-source-map

调试更友好

souce-map
cheap-module-souce-map
cheap-souce-map

推荐选择

eval-source-map：调试最友好（React、Vue默认使用）。
eval-cheap-module-souce-map：性能更友好。

生产环境

源代码要不要隐藏？调试要不要更友好

内联会让代码体积变大，所以在生产环境不用内联。

nosources-source-map全部隐藏

hidden-source-map只隐藏源代码，会提示构建后代码错误信息

推荐选择

source-map：调试最友好（推荐生成环境使用）。
cheap-module-souce-map：速度快。

缓存

cacheDirectory:true文件资源缓存

hash：每次wepack构建时会生成一个唯一的hash值。

问题：因为js和css同时使用一个hash值。
如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）

chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样

问题：js和css的hash值还是一样的
因为css是在js中被引入的，所以同属于一个chunk

contenthash：根据文件的内容生成hash值。不同文件hash值一定不一样

tree shaking

去除应用程序中没有使用的代码

必须使用ES6模块化
开启production环境

减少代码体积

在package.json中配置

"sideEffects"：false 所有代码都是没有副作用的代码，都可以进行tree shaking

可能会把css/@babel/polyfill去除

code split

可以将node_modules中代码单独打包一个chunk最终输出
自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk

1
optimization:{
2
    splitChunks:{
3
    chunks:'all'
4
  }
5
},
6

7
/*
8
通过s代码，让某个文件被单独打包成一个chunk
9
import动态导入语法：能将某个文件单独打包
10
*/
11
import(/* webpackChunkName :"test",webpackPrefetch:true */"./test")

webpackPrefetch 预加载，会在使用之前加载

存在兼容性问题慎用

正常加载可以认为是并行加载预加载为浏览器空闲时才加载

PWA

渐进式网络开发应用程序（离线访问技术），即没有网络的情况，也可以打开界面。

sw代码必须运行在服务器上

1
mpn i workbox-webpack-plugin -d

1
new WorkboxwebpackPlugin.GenerateSw({
2
    /*
3
    1.帮助serviceworker快速启动
4
    2.删除旧的 serviceworker生成一个serviceworker配置文件。
5
    */
6
    clientsClaim:true,
7
    skipWaiting:true
8
    })

多进程打包

thread-loader开启多进程打包。

进程启动大概为600ms，进程通信也有开销。

只有工作消耗时间比较长，才需要多进程打包，如果本身不大，使用多线程打包反而会更慢。

externals

1
externals:{
2
  //拒绝jQuery被打包进来
3
  jquery:'jQuery'
4
}

dll

将库打包成不同的文件

配置详解

resolve

1
resolve:{
2
    //配置解析模块路径别名 缺点没有提示
3
    alias:{
4
       $css: resolve(__dirname,"src/css")
5
    },
6
    //配置省略文件路径的后缀名
7
    extensions:[".js",".json"],
8
    //告诉webpack解析模块是去找哪个目录
9
  modules:[resolve（dirname，'../../node_modules'），'node_modules']
10
}

optimization

1
optimization: {
2
splitChunks: {
3
    chunks: 'all'
4
    // 默认值，可以不写~
5
},
6
    // 将当前模块的记录其他模块的 hash 单独打包为一个文件 runtime
7
    // 解决：修改 a 文件导致 b 文件的 contenthash 变化
8
runtimeChunk: {
9
  name: entrypoint => `runtime-${entrypoint.name}`
10
},

webpack5

1
npm iwebpack@next webpack-cli-D

通过持久缓存提高构建性能.
使用更好的算法和默认值来改善长期缓存。
通过更好的树摇和代码生成来改善捆绑包大小。
清除处于怪异状态的内部结构，同时在v4中实现功能而不引入任何重大更改.
通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用v5.

添加了用于长期缓存的新算法。在生产模式下默认情况下启用这些功能。

nodejs提供的模块需要手动添加。

webpack内部有chunk命名规则，不再是以id（0，1，2）命名了。

webpack 现在能够处理对嵌套模块的tree shaking。

webpack 4默认只能输出ES5代码

webpack5开始新增一个属性output.ecmaVersion，可以生成ES5和ES6/ES2015代码

webpack.config.js

将webpack常用的配置放在下面，免得每次使用都需要进行配置：

1
const { resolve } = require("path");
2
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
4
const HtmlWebpackPlugin = require("html-webpack-plugin");
5
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
6

7
process.env.NODE_ENV = "production";
8
const commonCssLoader = [
9
    MiniCssExtractPlugin.loader,
10
    "css-loader",
11
    {
12
        loader: "postcss-loader",
13
        options: {
14
            ident: "postcss",
15
            plugins: () => [require("postcss-preset-env")()]
16
        }
17
    }
18
];
19
module.exports = {
20
    entry: ["./src/index.js", "./src/index.html"],
21
    output: {
22
        filename: "js/built.[contenthash:10].js",
23
        path: resolve(__dirname, "build"),
24
        publicPath: "/",
25
        chunkFilename: "js/[name].[contenthash:10]_chunk.js"
26
    },
27
    module: {
28
        rules: [
29
            {
30
                test: /\.js$/,
31
                exclude: /node_modules/,
32
                enforce: "pre",
33
                loader: "eslint-loader",
34
                options: {
35
                    fix: true
36
                }
37
            },
38
            {
39
                oneOf: [
40
                    {
41
                        test: /\.css$/,
42
                        use: [...commonCssLoader]
43
                    },
44

45
                    {
46
                        test: /\.js$/,
47
                        exclude: /node_modules/,
48
                        loader: "babel-loader",
49
                        options: {
50
                            presets: [
51
                                [
52
                                    "@babel/preset-env",
53
                                    {
54
                                        useBuiltIns: "usage",
55
                                        corejs: { version: 3 },
56
                                        targets: {
57
                                            chrome: "60",
58
                                            firefox: "50",
59
                                            ie: "9",
60
                                            safari: "10",
61
                                            edge: "17"
62
                                        }
63
                                    }
64
                                ]
65
                            ],
66
                            cacheDirectory: true
67
                        }
68
                    },
69
                    {
70
                        test: /\.(jpg|png|gif)/,
71
                        loader: "url-loader",
72
                        options: {
73
                            limit: 8 * 1024,
74
                            name: "[hash:10].[ext]",
75
                            outputPath: "imgs",
76
                            esModule: false
77
                        }
78
                    },
79
                    {
80
                        test: /\.html$/,
81
                        loader: "html-loader"
82
                    },
83
                    {
84
                        exclude: /\.(js|css|less|html|jpg|png|gif)/,
85
                        loader: "file-loader",
86
                        options: {
87
                            outputPath: "media"
88
                        }
89
                    }
90
                ]
91
            }]
92
    },
93
    plugins: [
94
        new MiniCssExtractPlugin({
95
            filename: "css/built.[contenthash:10].css"
96
        }),
97
        new OptimizeCssAssetsWebpackPlugin(),
98
        new HtmlWebpackPlugin({
99
            template: "./src/index.html",
100
            minify: {
101
                collapseWhitespace: true,
102
                removeComments: true
103
            }
104
        }),
105
        new CleanWebpackPlugin()
106
    ],
107
    mode: "development",
108
    devServer: {
109
        contentBase: resolve(__dirname, "build"),
110
        compress: true,
111
        port: 3000,
112
        open: true,
113
        clientLogLevel: "none",
114
        hot: true,
115
        watchContentBase: true,
116
        watchOptions: {
117
            ignored: /node_modules/
118
        },
119
        quiet: true
120
    },
121
    optimization: {
122
        splitChunks: {
123
            chunks: "all"
124
        },
125
        runtimeChunk: {
126
            name:entrypoint =>`runtime-${entrypoint.name}`
127
        }
128
    },
129
    devtool: "source-map"
130
};

package.json添加

1
"browserslist": {
2
  "development": [
3
    "last 1 chrome version",
4
    "last 1 firefox version",
5
    "last 1 safari version"
6
  ],
7
  "production": [
8
    ">0.2%",
9
    "not dead",
10
    "not op_mini all"
11
  ]
12
},
13
"eslintConfig": {
14
  "extends": "airbnb-base",
15
  "env": {
16
    "browser": true
17
  }
18
}

运行：

npx webpack-dev-server

参考资料

尚硅谷2020最新版Webpack5实战教程(从入门到精通)

未找到相关文章

简介

核心概念

Entry

Output

Loader

Plugins

Mode

常见配置

安装

配置

无配置打包

配置环境

loader

css

less

图片资源

其他资源

plugins 插件

HTML

压缩CSS

js

兼容性处理

devserver

环境优化

HMR

source-map

开发环境

生产环境

缓存

tree shaking

code split

PWA

多进程打包

externals

dll

配置详解

resolve

optimization

webpack5

webpack.config.js

参考资料

转载协议