• webpack4从0开始构建前端单页项目(12)用postcss-loader处理css


    PostCSS这个插件就有点类似js的babel,babel是用来处理js的一些特性和兼容性的。PostCSS就是用来处理css的一些特性和兼容性的。比如补齐css的前缀等,支持一些css特性语法等。

    安装 postcss-loader

        cnpm i postcss-loader -D
    

    项目结构

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

    依赖的模块(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",
            "mini-css-extract-plugin": "^0.11.3",
            "postcss-loader": "^4.0.3",
            "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");
        const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    
        module.exports = {
            entry: "./src/main.js",
            mode: "development",
            output: {
                path: path.join(__dirname, "dist"),
                filename: "app.[hash:16].js",
            },
            plugins: [
                new MiniCssExtractPlugin({
                    filename: "[name].css",
                    ignoreOrder: false,
                }),
                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: [
                            MiniCssExtractPlugin.loader,
                            "css-loader",
                            {
                                loader: "postcss-loader", //使用postcss
                            },
                        ],
                    },
                ],
            },
        };
    

    postCSS 参考: http://postcss.docschina.org/

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

    开发工具
  • 相关阅读:
    Java5 多线程实践
    ExtJS2.0实用简明教程 Border区域布局
    MySQL安装图解
    ExtJS2.0实用简明教程 组件的使用
    ExtJS2.0实用简明教程 ExtJS版的Hello
    Linux操作系统中如何安装Tomcat
    线程池的介绍及简单实现
    ExtJS2.0实用简明教程 获得ExtJS
    汽车常识全面介绍 动力系统
    MySQL 图形化管理工具介绍
  • 原文地址:https://www.cnblogs.com/cisbest/p/13778077.html
Copyright © 2020-2023  润新知