Webpack day-2

一、Webpack 自动生成 html 文件

插件 html-webpack-plugin 在 Webpack 打包时生成 html 文件，并在文件中自动引入 js 文件

快速开始

1.安装插件

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

2.将插件添加到 webpack.config.js 配置文件中

    // 下载完成之后将模块加载进来
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const path = require('path');

    module.exports = {
        // ...
        // 插件配置 
        plugins: [
            // 配置 webpack.config.js
            new HtmlWebpackPlugin({
                // 会直接在项目根目录下寻找，这里用path是防止路径报错
                template:path.resolve(__dirname, 'public/index.html'),
                // 默认是在 dist 文件下创建，这里用path是防止路径报错
                filename:path.resolve(__dirname, 'dist/index.html')
            })
        ],
    };

3.接下来就可以打包看效果啦

dist 根目录会出现 html 文件，已经压缩成功

二、Webpack 打包 CSS 代码（如果不想将 CSS 打包到 JS 中的方法可以跳过）

加载器 css-loader 解析 css 代码到 JS 中

加载器 style-loader 将解析的 css 代码导入 Dom 中

快速开始

1.安装加载器

    npm i css-loader style-loader --save-dev

2.需要和你的入口文件产生关联

    import './index.css'; 

3.将加载器添加到 webpack.config.js 配置文件中

    // ...
    module.exports = {
        // ...
        module: {
            // 这里是固定写法
            rules: [
                {
                    // /\.css$/ 以 css 为结尾的文件
                    // i 不区分大小写
                    test: /\.css$/i,
                    // 从后往前执行，顺序不能颠倒
                    use: ["style-loader", "css-loader"],
                },
            ],
        },
    };

4.接下来就可以打包看效果啦

在 js 出口文件里加载者着 css 代码，这样会使 js 体积变得很大

三、如果由于某种原因你需要将 CSS 提取为一个文件（即不要将 CSS 存储在 JS 模块中）

插件 mini-css-extract-plugin 提取 css 代码

好处：css 文件可以被浏览器缓存，减少 js 文件体积

注： style-loader 和 mini-css-extract-plugin 一起使用

这个插件运用了 webpack v5 新特性，与 extract-text-webpack-plugin 相比：

• 异步加载
• 没有重复的编译（性能）
• 更容易使用
• 特别针对 CSS 开发

快速开始

1.安装插件

    npm i mini-css-extract-plugin --save-dev

2.将插件添加到 webpack.config.js 中

    const MiniCssExtractPlugin = require("mini-css-extract-plugin");

    module.exports = {
        // ...
        plugins: [
            // ...
            new MiniCssExtractPlugin()
        ],
        module: {
            rules: [
                {
                    // /\.css$/ 以 css 为结尾的文件
                    // i 不区分大小写
                    test: /\.css$/i,
                    // 从后往前执行，顺序不能颠倒
                    use: [MiniCssExtractPlugin.loader, "css-loader"],
                },
            ],
        },
    };

3.接下来就可以打包看效果啦

dist 根目录会有一个 main.css 样式表，但是里面的内容并没有压缩

4.解决了打包 CSS 的问题但是还没有解决压缩的问题，我们需要再次导入一个插件

    npm install css-minimizer-webpack-plugin --save-dev

5.将插件添加到 webpack.config.js 中

    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

    module.exports = {
        module: {
            rules: [
                {
                    test: /.css$/,
                    // 从后往前执行，顺序不能颠倒
                    use: [MiniCssExtractPlugin.loader, "css-loader"],
                },
            ],
        },
        optimization: {
            minimizer: [
                // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
                `...`,
                new CssMinimizerPlugin(),
            ],
        },
        plugins: [new MiniCssExtractPlugin()],
    };

6.接下来就可以打包看效果啦

四、打包 less 代码

加载器 less-loader 把 less 代码编译为 css 代码

快速开始

1.安装解析器

    npm i less less-loader --save-dev

2.和你的入口文件产生关联

    import './index.less'

3.将解析器添加到 webpack.config.js 中

    // ...
    module.exports = {
        module: {
            // ...
            rules: [
                {
                    // 所有 less 结尾的文件
                    test: /\.less$/i,
                    // 从后往前执行，顺序不能颠倒
                    use: [
                        // 如果不想将 CSS 打包到 JS 中的方法可以使用上面学习的 MiniCssExtractPlugin 插件
                        // 'style-loader',

                        // 生成单独的css文件
                        MiniCssExtractPlugin.loader
                        'css-loader',
                        'less-loader',
                    ],
                },
            ],
        },
    };

如果我们有 css 和 less 两种样式表需要将两种分开写打包规则如图：

4.接下来就可以打包看效果啦

他会将 css 和 less 一起打包并放入一个 css 文件

五、打包图片

资源模块 是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader

在 webpack 5 之前，通常使用：

• raw-loader 将文件导入为字符串
• url-loader 将文件作为 data URI 内联到 bundle 中
• file-loader 将文件发送到输出目录

我这里使用的是 Webpack v5，在 css 中我引入了背景图片，打包时虽然图片打包成功，前端页面也也可以正常显示，但是不能自定义输出路径，所以需要我们接着继续配置 webpack.config.js 文件

Webpack v5 内置了资源模块，所以无需下载

1.配置 webpack.config.js

    module.exports = {
        module: {
            // ...
            rules: [
                {
                     // /\.(png|jpg|gif)$/ 以 png/ipg/gif 为结尾的文件
                    test: /\.(png|jpg|gif)$/i,
                    // 打包类型：自动判定打包方式
                    // 大于 8kb 文件：发送一个单独的文件并导出 URL 地址
                    // 小于 8kb 文件：导出一个 data URL(base64字符串)
                    type: 'asset',
                    // 设置图片出口 dist根目录static文件
                    /**
                     * [hash][ext][query] 占位符
                     * hash 对内容进行算法计算，得到映射的数字字母组合
                     * ext 使用内容之前的占位符，如：.png/.jpg等
                     * query 保留引入文件时的代码中查询参数(只有 URL 下生效)
                     */
                    generator: {
                        filename: 'static/[hash][ext][query]'
                    }
                }
            ],
        },
    };

2.接下来就可以打包看效果啦