webpack4从0开始构建前端单页项目(8)处理css的loader

css-loader 会对 @import 和 url() 引入的.css文件进行处理，并且转换成commonjs模块,style-loader将样式通过style标签插入到DOM中。

在 webpack 中，css 文件通过 js 文件引入，css-loader 可以使 js 文件中引入的 css 文件被正确的识别。style-loader 可以使被引入的 css 文件正确的插入到 style 标签中。因为 loader 的执行顺序是从下到上，从左到右的，所以要先用 css-loader 处理，再用 style-loader 处理。

安装css-loader、style-loader

    cnpm i css-loader style-loader -D

项目结构

    project
    |   .babelrc            # babel-loader配置文件
    |   .editorconfig       # 配置格式化插件
    |   package.json        # 项目需要的依赖
    |   webpack.config.js   # webpack配置文件
    |
    +---public
    |       index.html      # 用于打包生成 .html 文件的模板
    |
    ---src
            main.js         # webpack的入口文件
            style.css       # css文件

在main.js中引入.css文件

\ main.js
    import "./style.css";

依赖的模块(package.json)

    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "babel-loader": "^8.1.0",
        "css-loader": "^4.3.0",
        "html-webpack-plugin": "^4.5.0",
        "style-loader": "^1.2.1",
        "webpack": "^4.44.2",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    }

webpack 配置文件

// webpack.config.js
    const webpack = require("webpack");
    const path = require("path");
    const htmlWebpackPlugin = require("html-webpack-plugin");

    module.exports = {
        entry: "./src/main.js",
        mode: "development",
        output: {
            path: path.join(__dirname, "dist"),
            filename: "app.[hash:16].js",
        },
        plugins: [
            new htmlWebpackPlugin({
                filename: "index.html",
                template: "./public/index.html",
                minify: {
                    collapseWhitespace: false,
                },
                inject: true,
            }),
        ],
        devServer: {
            contentBase: path.join(__dirname, "dist"),
            compress: true,
            port: 9000, // 配置端口
            hot: true,
        },

        module: {
            rules: [
                {
                    test: /.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: "babel-loader",
                },
                {
                    test: /.css$/,
                    use: ["style-loader", "css-loader"],
                },
            ],
        },
    };    

loader的执行顺序是从左到右，从下到上的，也就是先执行css-loader,在执行style-loader。

css-loader 参考: https://webpack.docschina.org/loaders/css-loader/

style-loader 参考: https://webpack.docschina.org/loaders/style-loader/