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

最新推荐文章于 2024-05-15 14:16:04 发布

城南花开ze

最新推荐文章于 2024-05-15 14:16:04 发布

阅读量209

点赞数

分类专栏： Webpack、Vite、Gulp 文章标签： webpack 手摸手学习系列提取 css、css 兼容 css 压缩

本文链接：https://blog.csdn.net/weixin_42614080/article/details/106366232

版权

Webpack、Vite、Gulp 专栏收录该内容

36 篇文章 6 订阅

订阅专栏

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

创建空文件夹，通过 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。
创建 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>

创建 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'
}

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

二、webpack 配置 css 兼容性处理

创建空文件夹，通过 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。
创建 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>

创建 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'
}

在 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"
    ]
 }

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

三、webpack 配置 css 压缩

css 的压缩在上面的 css 兼容性的项目上进行更改，通过 npm i optimize-css-assets-webpack-plugin -D 命令下载 optimize-css-assets-webpack-plugin 这个 css 压缩的插件。
在 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'
}

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

城南花开ze

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack 手摸手学习系列之提取 css、css 兼容和 css 压缩

一、webpack 提取 css 成单独的文件创建空文件夹，通过 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 和
复制链接

扫一扫

专栏目录