webpack学习笔记（五）：处理css样式文件

在一开始认识webpack已经知道webpack可以将所有资源作为一个个的模块进行处理，包括js/json/css/图片...等。然而，它只能将js/json作为模块打包处理。比如，我们在src下创建一个css目录，再创建一个index.css文件，内容如下：

在index.html引入该css文件：

配置文件如下：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle_1.js',
    path: path.resolve(__dirname, './list')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ],
  mode: 'development',
  devServer: {
    port: 8081,
    hot: true,
    compress: true
  }
}

执行打包命令后，打开浏览器，查看控制台：

可见，引入的样式并不生效，但是js文件生效了，说明webpack并不能直接将css进行打包。要想处理css样式文件，需要使用到loader，loader让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用。这里我们处理css 文件就需要使用到css-loader和style-loader。

• 首先，下载css-loader和style-loader：
  

• 在webpack.config.js文件中配置：
  
  关于loader的配置我们是写在module属性下的rules属性中，rules属性需要配置各种各样的loader，因此是一个数组形式，test表示要识别哪些文件要转换，use表示转换这类文件要使用的loader，注意顺序是从右往左。这里是先使用css-loader来将css文件转换成js，再使用style-loader生成<style>标签把样式引入到html文件中。

• 之前我们引入样式文件是在html文件中使用<link>标签引入，但现在不是在这里引入了，而是在入口文件index.js中引入，这样webpack就可以识别css文件并打包到js文件中：
  
  执行打包命令，样式生效：
  

• 样式文件除了css文件外，还有less文件。要处理less文件，需要下载对应的loader：
  
  less包作用是解析less语法，less-loader作用是把less语法转换成css语法。下载完后，在webpack.config.js中添加配置：
  
  创建less目录，并创建index.less文件：
  
  记得在入口文件index.js中引入index.less文件：
  
  执行打包命令，样式生效：
  

• 同样也可以处理scss文件，需要下载的是node-sass和sass-loader包：
  
  
  同样node-sass是用来解析scss语法的，sass-loader把scss语法转换成css语法，添加配置：
  
  创建scss目录并且创建index.scss文件，内容如下：
  
  在index.js中引入该文件：
  
  执行打包命令，样式生效：
  
  关于webpack处理样式文件的就到此结束啦~

本篇笔记是看了B站up主“左耳击水兽”的讲解视频记录下来，感兴趣的同学可以直接看他视频哦。