用webpack构建项目(5)处理less、sass(scss)、stylus文件

css的预处理less、sass(scss)、stylus三选一就行。
js规范有ES3/ES5和ES6等等。那PostCSS就相当于把ES6转换成ES3/ES5的Babel。可以把css新特性转换成大多数浏览器都能理解的语法。

安装处理less、sass(scss)、stylus的loader

    npm i less less-loader -D
    npm i sass-loader sass webpack -D
    npm i stylus stylus-loader -D

项目目录结构

    F:\webpack-demo
    ├── dist/
    ├── package.json
    ├── public/
    |  └── index.html
    ├── README.md
    ├── src/
    |  ├── index.js         <!-- webpack入口文件 -->
    |  ├── less.less        <!-- 要使用的less文件 -->
    |  ├── sass.sass        <!-- 要使用的sass文件 -->
    |  ├── scss.scss        <!-- 要使用的scss文件 -->
    |  ├── styl.styl        <!-- 要使用的styl文件 -->
    |  └── style.css
    ├── webpack.common.js
    ├── webpack.dev.js
    ├── webpack.prod.js
    └── webpack.test.js

在webpack入口文件中引入预处理的文件(src/index.js)

    import "./style.css";
    import "./less.less";
    import "./sass.sass";
    import "./scss.scss";
    import "./styl.styl";

配置webpack.common.js

    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");   // 引入html-webpack-plugin插件

    module.exports = {
        mode:"none",                // 模式(mode):webpack 使用相应模式的内置优化
        entry: "./src/index.js",    // 入口(entry):webpack打包的入口
        output: {                   // 输出(output):webpack编译打包后的文件输出的位置
            filename: 'main.js',
            path: path.resolve(__dirname, 'dist'),
            clean: true,            // 每次构建前清理 /dist 目录
        },
        plugins:[                   // 插件(plugin)：打包优化，资源管理，注入环境变量。
            new HtmlWebpackPlugin({
                title:"webpack-笔记",                // 用于生成的HTML文档的标题
                filename: "index.html",             // 指定打包生成html文件的名称
                template: "./public/index.html",    // 指定使用哪个html文件为模板,如果不指定会使用默认配置
                minify: {                           // 优化html-webpack-plugin生成的html文件
                    collapseWhitespace: true,       // 设置为true 压缩html,去掉html文件中的空格，换行
                },
                inject: true,                       // 默认为true，打包和自动引入js、css等文件。  设置为false不会自动引入js、css等文件
                // chunks: ["main"],  用于多入口，指定加载哪些入口文件(chunks)，多页应用会用到
            })
        ],
        module: {                   // loader：处理其他类型的文件，webpack只能处理JavaScript和JSON文件，要处理其他文件就需要loader
            rules: [                // 处理css
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader'],
                    // 保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。
                    // css-loader先处理css文件，在处理css样式
                },
                {                   // 处理less
                    test: /\.less$/i,
                    use: [
                        {
                            loader: 'style-loader', // 从 JS 中创建样式节点
                        },
                        {
                            loader: 'css-loader', // 转化 CSS 为 CommonJS
                        },
                        {
                            loader: 'less-loader', // 编译 Less 为 CSS
                        },
                    ],
                },
                {                   // 处理sass/scss
                    test: /\.s[ac]ss$/i,
                    use: [
                        // 将 JS 字符串生成为 style 节点
                        'style-loader',
                        // 将 CSS 转化成 CommonJS 模块
                        'css-loader',
                        // 将 Sass 编译成 CSS
                        'sass-loader',
                    ],
                },
                {                   // 处理styl
                    test: /\.styl$/,
                    use: [
                        {
                            loader: "style-loader", // 从 JS 中创建样式节点
                        },
                        {
                            loader: "css-loader", // 将 CSS 转为 CommonJS
                        },
                        {
                            loader: "stylus-loader", // 将 Stylus 编译为 CSS
                        },
                    ],
                },
            ],
        }
    };

运行&打包

    npm start               # 运行开发环境  浏览器访问：http://localhost:8080/
    npm run build           # 生产环境打包   
    npm run build:test      # 测试环境打包

loader参考:

less
less中文文档
sass
sass中文文档
stylus
stylus中文文档
less-loader
sass-loader
stylus-loader
postcss