webpack学习(三)-样式资源打包

鱼鱼大仙的猫 9/3/2020 webpack

# 项目结构

03打包样式资源
    -build
    -src
        --index.js
        --index.css
    -webpack.config.js
    -package.json

1
2
3
4
5
6
7

# webpack.config.js配置

const { resolve } = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ],
    },
    plugins: [],
    mode: 'development'
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在module中配置loader，test表示需要匹配的文件，本次需要打包样式资源，所以我们需要匹配文件后缀是css的文件；use表示采用哪些loader来进行处理，对于css文件，我们使用的是style-loader和css-loader， style-loader 创建style标签，将js中的样式资源插入进行，添加到head中生效；而 css-loader 是将css文件变成 commonJs模块加载到js中，里面的内容是字符串类型样式。此外，在use数组中，执行loader的顺序是 “从右到左，从下到上，依次执行”，我们对css文件先使用css-loader处理，再用style-loader处理，所以就需要把css-loader放到最右边。

# 打包

代码编写完成之后，使用npm i css-loader style-loader -D命令安装css-loader和style-loader，安装完成后，命令行输入webpack进行打包，打包完成后，我们可以在build目录下的build.js中找到打包好的css文件