Webpack安装(2)-打包css、scss、less(包括编译、分离)

灰太狼 2021-09-14 15:36 330阅读 0赞

此文接着[《Webpack安装(1)-集成Babel》][Webpack_1_-_Babel]  
完整代码详见：[https://github.com/lhtzbj12/webpack-demo][https_github.com_lhtzbj12_webpack-demo]  
1、打包css文件，先使用下面的命令安装css-loader和style-loader

cnpm install --save-dev css-loader style-loader

2、需要打包scss，则需要安装node-sass和sass-loader，采用以下命令安装

cnpm install --save-dev node-sass sass-loader

3、需要打包less，则需要安装less和less-loader，采用以下命令安装

cnpm install --save-dev less less-loader

4、在src文件夹里建css、scss、less文件

/* style1.css */
    @charset "utf-8";
    .div1{ background: #ff0000;}

/* style2.scss */
    @charset "utf-8";
    $base-color:#ffff00;
    .div2{ background: $base-color;}

/* style3.less */
    @base-color:#0000ff;
    .div3{  background: @base-color;}

5、修改src/index.html

<!DOCTYPE html>
    <html>
    <head>
        <title>webpack demo</title>
    </head>
    <body>
    <div class="div1">Hello World 测试css</div>
    <div class="div2">Hello World 测试scss</div>
    <div class="div3">Hello World 测试less</div>
    <script src="bundle.js"></script>
    </body>
    </html>

6、修改webpack.config.js

...
    {
        test: /\.css$/,
        use: [ 'style-loader','css-loader']
    },
    {
        test: /\.scss$/,
        use:[ 'style-loader','css-loader','sass-loader'],
    },
    {
        test: /\.less$/,
        use:[ 'style-loader','css-loader','less-loader'],
    }
    ...

7、修改src/main.js，import文件(目前，css代码将打包到bundle.js文件里，因此html里不需要引用css文件)

import "./style1.css"
    import "./style2.scss"
    import "./style3.less"

8、使用npm start命令启动服务（如何之前已启动，则需要关闭）

npm start

9、css各文件分离，生成的文件 不嵌入bundle.js，而是放在单独的文件里。使用Extract Text Plugin插件,使用下面的命令安装。

cnpm install --save-dev extract-text-webpack-plugin

修改webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');

plugins: [
        new ExtractTextPlugin('css/index.css')
    ]

{ test: /\.css$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:"css-loader" }) },
    { test: /\.scss$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"sass-loader" }] }) },
    { test: /\.less$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"less-loader" }] }) }

由于css与js分离，因此，index.html里需要引用css打包生成的的index.css

<link rel="stylesheet" type="text/css" href="css/index.css">

使用npm run build打包，就可以生成css/index.css文件。  
完整的webpack.config.js文件

const path = require('path')
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    module.exports = {
        entry: {
            main: path.resolve(__dirname, 'src/main.js'),       //入口
        },
        output: {
            filename: 'bundle.js',               //输出的文件名
            path: path.resolve(__dirname, 'build') //输出文件所在的目录
        },
        devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
            contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
        },
        module: { // 如何处理项目中不同类型的模块
            rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "env", "react"
                            ]
                        }
                    },
                    exclude: path.resolve(__dirname, 'node_modules'),
                    include: path.resolve(__dirname, 'src'),
                },
                {
                    test: /\.css$/,
                    use:ExtractTextPlugin.extract({
                        fallback:"style-loader",
                        use:"css-loader"
                    })
                },
                {
                    test: /\.scss$/,
                    use:ExtractTextPlugin.extract({
                        fallback:"style-loader",
                        use:[{
                            loader:"css-loader"
                        },{
                            loader:"sass-loader"
                        }]
                    })
                },
                {
                    test: /\.less$/,
                    use:ExtractTextPlugin.extract({
                        fallback:"style-loader",
                        use:[{
                            loader:"css-loader"
                        },{
                            loader:"less-loader"
                        }]
                    })
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('css/index.css')
        ]
    }

[Webpack_1_-_Babel]: http://blog.csdn.net/lhtzbj12/article/details/79188342
[https_github.com_lhtzbj12_webpack-demo]: https://github.com/lhtzbj12/webpack-demo