webpack使用CSS文件

在实际开发项目过程中，CSS文件用于修改页面的样式，如何使用webpack来对CSS文件进行打包，以下是使用CSS文件进行打包的步骤

1. 首先按照如图所示，创建项目目录结构
   
2. 其中normal.css文件表示要打包的CSS文件。首先在终端中安装style-loader与css-loader，命令为：npm install style-loader --save-dev、npm install css-loader --save-dev
3. 安装完成之后，进入main.js文件中，引入normal.css文件

require('./css/normal.css');

4. 进入webpack.config.js文件，添加module属性

module: {
    rules: [
      {
        test: /\.css$/,
        // style-loader代表将样式加载到DOM中，使页面可以显示
        // css-loader代表将css文件进行加载，无法将其显示在页面上
        // 在use属性中，默认从右向左执行。先执行css-loader,再执行style-loader
        use: ['style-loader', 'css-loader']
      }
    ]
  }

5. 打包整个项目，CSS文件样式可以正常显示