webpack 手摸手学习系列之提取 css、css 兼容和 css 压缩

素颜马尾好姑娘i 2023-02-13 03:20 10阅读 0赞

#### 一、webpack 提取 css 成单独的文件 ####

1.  创建空文件夹，通过 `npm init` 命令初始化 `package.json` 文件，通过 `npm install webpack webpack-cli -g` 命令全局下载 `webpack` 和 `webpack-cli`，通过 `npm install webpack webpack-cli -D` 命令本地下载 `webpack` 和 `webpack-cli`，通过 `npm i style-loader css-loader -D` 命令下载 `style-loader` 和 `css-loader`，通过 `npm i mini-css-extract-plugin -D` 命令下载 `mini-css-extract-plugin`，通过 `npm i html-webpack-plugin` 命令下载 `html-webpack-plugin`。
2.  创建 `src` 文件夹，里面创建 `css` 、`js` 文件夹以及 `index.html` 文件。`css` 文件夹中放样式文件，`a.css` 和 `b.css`，`js` 文件夹中放 `index.js`，代码如下所示：

*  **a.css**
    
        #box1 { 
            width: 100px;
            height: 100px;
            background-color: pink;
        }
 *  **b.css**
    
        #box2 { 
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
 *  **index.js**
    
        import '../css/a.css';
        import '../css/b.css';
 *  **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>
            <div id="box1"></div>
            <div id="box2"></div>
        </body>
        </html>

1.  创建 `webpack.config.js` 文件，通过 `require` 引入 `path` 、 `html-webpack-plugin` 和 `mini-css-extract-plugin` 。`entry` 是入口文件，`output` 是出口文件，`filename` 是打包输出后的文件名，`path` 是输出路径。`module` 是 `loader` 的配置，`rules` 是详细的 `loader` 配置。第一个规则是匹配以 `.css` 结尾的文件，使用的 `loader` 是 `MiniCssExtractPlugin.loader` 和 `css-loader`。如果使用 `style-loader` 就会创建 `style` 标签，将样式放入，使用 `css-loader` 就会将 `css` 文件整合到 `js` 文件中，所以通过 `MiniCssExtractPlugin.loader` 取代 `style-loader`，提取 `js` 中的 `css` 成单独文件。`plugins` 里面是一些插件配置，通过 `new HtmlWebpackPlugin()`，复制里面的文件，并自动引入打包输出的所有资源（`JS/CSS`），通过 `MiniCssExtractPlugin` 提取 `css` 以及对输出的 `css` 文件进行重命名 。设置 `mode` 模式为 `development` 开发模式，代码如下所示：

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
    module.exports = { 
        entry: './src/js/index.js',
        output: { 
            filename: 'js/built.js',
            path: resolve(__dirname, 'build')
        },
        module: { 
            rules: [
                { 
                    text: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: './src/index.html'
            }),
            new MiniCssExtractPlugin({ 
                filename: 'css/built.css'
            })
        ],
        mode: 'development'
    }

1.  在命令行输入 `webpack` 命令，资源就会进行打包，同时在 `build` 文件夹中，多出一个 `js` 和 `css` 的打包输出文件。同时，还可以打开 `index.html`，发现样式也已经生效了。

#### 二、webpack 配置 css 兼容性处理 ####

1.  创建空文件夹，通过 `npm init` 命令初始化 `package.json` 文件，通过 `npm install webpack webpack-cli -g` 命令全局下载 `webpack` 和 `webpack-cli`，通过 `npm install webpack webpack-cli -D` 命令本地下载 `webpack` 和 `webpack-cli`，通过 `npm i style-loader css-loader -D` 命令下载 `style-loader` 和 `css-loader`，通过 `npm i mini-css-extract-plugin -D` 命令下载 `mini-css-extract-plugin`，通过 `npm i html-webpack-plugin` 命令下载 `html-webpack-plugin`，通过 `npm i postcss-loeader postcss-preset-env -D` 命令下载 `postcss-loeader` 和 `postcss-preset-env`。
2.  创建 `src` 文件夹，里面创建 `css` 、`js` 文件夹以及 `index.html` 文件。`css` 文件夹中放样式文件，`a.css` 和 `b.css`，`js` 文件夹中放 `index.js`，代码如下所示：

*  **a.css**
    
        #box1 { 
            width: 100px;
            height: 100px;
            background-color: pink;
            display: flex;
            backface-visibility: hidden;
        }
 *  **b.css**
    
        #box2 { 
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
 *  **index.js**
    
        import '../css/a.css';
        import '../css/b.css';
 *  **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>
            <div id="box1"></div>
            <div id="box2"></div>
        </body>
        </html>

1.  创建 `webpack.config.js` 文件，通过 `require` 引入 `path` 、 `html-webpack-plugin` 和 `mini-css-extract-plugin` 。`entry` 是入口文件，`output` 是出口文件，`filename` 是打包输出后的文件名，`path` 是输出路径。`module` 是 `loader` 的配置，`rules` 是详细的 `loader` 配置。第一个规则是匹配以 `.css` 结尾的文件，通过 `use` 使用 `loader`，里面是数组。使用 `MiniCssExtractPlugin.loader` 取代 `style-loader`，作用是提取 `js` 中的 `css` 成单独文件，使用 `css-loader` 将 `css` 文件整合到 `js` 文件中，使用 `postcss-loader`，进行配置，`ident` 为固定写法，使用 `postcss-preset-env` 这个 `postcss` 的插件。`plugins` 里面是一些插件配置，通过 `new HtmlWebpackPlugin()`，复制里面的文件，并自动引入打包输出的所有资源（`JS/CSS`），通过 `MiniCssExtractPlugin` 提取 `css` 以及对输出的 `css` 文件进行重命名 。设置 `mode` 模式为 `development` 开发模式，代码如下所示：

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
    process.env.NODE_ENV = 'development';
    
    module.exports = { 
        entry: './src/js/index.js',
        output: { 
            filename: 'js/built.js',
            path: resolve(__dirname, 'build')
        },
        module: { 
            rules: [
                { 
                    text: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        { 
                            loader: 'postcss-loader',
                            options: { 
                                ident: 'postcss',
                                plugins: () => [
                                    require('postcss-preset-env')()
                                ]
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: './src/index.html'
            }),
            new MiniCssExtractPlugin({ 
                filename: 'css/built.css'
            })
        ],
        mode: 'development'
    }

1.  在 `package.json` 这个文件中，进行配置 `browserslist`，在 `css` 兼容处理的时候，需要帮 `postcss` 找到 `package.json` 中 `browserslist` 里面的配置，通过配置加载指定的`css`兼容性样式，`development` 为开发环境配置，`last 1 chrome version` 表示兼容最近的 `chrome` 版本，`last 1 firefox version` 表示兼容最近的 `firefox` 版本，`last 1 safari version` 表示兼容最近的 `safari` 版本。`production` 为生产环境配置，`>0.2%` 表示大于 `99.8%` 的浏览器，`not dead` 表示不要已经死的浏览器，`not op_mini all` 表示不要使用 `op_mini all` 浏览器，代码如下所示：

"browserslist": { 
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ],
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ]
     }

1.  在命令行输入 `webpack` 命令，资源就会进行打包，同时在 `build` 文件夹中，多出一个 `js` 和 `css` 的打包输出文件。同时，还可以打开 `index.html`，发现样式也已经生效，`css` 的代码也已经做了兼容性处理。

#### 三、webpack 配置 css 压缩 ####

1.  `css` 的压缩在上面的 `css` 兼容性的项目上进行更改，通过 `npm i optimize-css-assets-webpack-plugin -D` 命令下载 `optimize-css-assets-webpack-plugin` 这个 `css` 压缩的插件。
2.  在 `webpack.config.js` 文件中，在 `plugins` 中加入 `new OptimizeCssAssetsWebpackPlugin()` 这一行的 `css` 压缩配置，代码如下所示：

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
    
    process.env.NODE_ENV = 'development';
    
    module.exports = { 
        entry: './src/js/index.js',
        output: { 
            filename: 'js/built.js',
            path: resolve(__dirname, 'build')
        },
        module: { 
            rules: [
                { 
                    text: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        { 
                            loader: 'postcss-loader',
                            options: { 
                                ident: 'postcss',
                                plugins: () => [
                                    require('postcss-preset-env')()
                                ]
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: './src/index.html'
            }),
            new MiniCssExtractPlugin({ 
                filename: 'css/built.css'
            }),
            new OptimizeCssAssetsWebpackPlugin()
        ],
        mode: 'development'
    }

1.  在命令行输入 `webpack` 命令，资源就会进行打包，同时在 `build` 文件夹中，多出一个 `js` 和 `css` 的打包输出文件。同时，还可以打开 `index.html`，发现样式也已经生效了，`css` 的代码也会进行压缩了。