Webpack之部分配置

1、热更新

@package.json
"dev": "webpack-dev-server --config webpack.dev.js --open"

@webpack.prod.js
devServer: {
        // 热更新配置
        contentBase: "./dist",
        hot: true,
    },

2、什么是文件指纹

打包后输出的文件名的后缀。一般用作版本的管理，对于没有修改的文件，可以继续使用浏览器的缓存，加快页面的访问。

3、文件指纹的类型：

Hash: 和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改

Chunkhash: 和webpack打包的chunk有关 不同的entry会生成不同的chunkhash值

Contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变

4、JS文件的压缩

内置了uglifyjs-webpack-plugin

5、CSS文件的压缩

使用optimize-css-assets-webpack-plugin

同时使用cssnano

6、HTML文件的压缩

修改html-webpack-plugin，设置压缩参数

7、自动清理构建目录

Clean-webpack-plugin

8、如何在编写CSS时不需要添加前缀？

PostCSS插件autoprefixer自动补齐CSS3前缀

{
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader",
                    {
                        // 自动补齐CSS前缀
                        loader: "postcss-loader",
                        options: {
                            plugins: () => [
                                require("autoprefixer")({
                                    browsers: [
                                        "last 2 version",
                                        ">1%",
                                        "ios 7",
                                    ],
                                }),
                            ],
                        },
                    },
                ], // 解析less
            },

9、移动端CSS px自动转换成rem

使用px2rem-loader lib-flexible

npm install px2rem-loader -D

npm install lib-flexible -S

{
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader",
                    {
                        // 移动端CSS px自动转换成rem
                        loader: "px2rem-loader",
                        options: {
                            remUnit: 75, // 单位 若屏幕宽度是750像素，相当于10个rem
                            remPrecision: 8, // 小数点的位数
                        },
                    },
                ], // 解析less
            },

rem和px的对比：

• rem 是相对单位
• px 是绝对单位

10、静态资源内联

资源内联的意义

代码层面：

• 页面框架的初始化脚本
• 上报相关打点
• css内联避免页面闪动

请求层面： 减少HTTP网络请求数

• 小图片或者字体内联(url-loader)

CSS内联

方案一： 借助 style-loader

方案二：html-inline-css-webpack-plugin

11、多页面应用打包通用方案

npm i glob -D

12、使用sourcemap

作用：通过source map 定位到源代码

开发环境开启，线上环境关闭


13、基础库分离

• 思路：将react、react-dom基础包通过cdn引入，不打入bundle中
• 方法：使用html-webpack-externals-plugin