Webpack——Webpack打包样式资源（css、less、sass）这次学习使用Webpack去打包样式资源文件，

动漫.jpg 这次学习使用Webpack去打包样式资源文件，虽然Webpack默认不能处理样式文件，如.css、.less、.sass文件，但是可以配置相应的loader去打包处理这些文件。使用的包的版本：

npm i webpack@4.41.6 webpack-cli@3.3.11 -D
npm i css-loader@3.4.2 style-loader@1.1.3 less@3.11.1 less-loader@5.0.0 -D

由于src文件夹里没有.html文件，打包后的dist里也不会有（后面的文章里会介绍使用webpack打包自定义的.html文件），所以在打包后的dist文件夹中手动创建一个index.html文件并引入build.js文件：

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./build.js"></script>
</body>
</html>

// webpack.config.js
const path = require('path')
module.exports = {
  // 打包入口文件
  entry: './src/index.js',
  output: {
    // __dirname nodejs中的变量，表示 当前文件所在的目录
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js'
  },
  // loader 的配置
  module: {
    // 不同文件需要配置不同 loader
    rules: [
      // 处理 .css 文件
      {
        test: /\.css$/, // loader 会遍历处理 .css 文件
        // 执行顺序:从最后一个loader向前依次执行
        use: [
          // 创建style标签，将build.js中的样式资源插入其中，添加到head标签中
          'style-loader',
          // 将css文件变成CommonJs模块加载到build.js中，里面的内容是样式字符串
          'css-loader'
        ]
      },
      // 处理 .less 文件
      {
        test: /\.less$/, // loader 会遍历处理 .less 文件
        use: [
          'style-loader',
          'css-loader',
          // 将.less文件编译为.css文件
          'less-loader'
        ]
      },
      // 处理.sass文件同上，但是需要下载 sass-loader 把.sass文件编译成.css文件
    ]
  },
  // plugin 的配置
  plugins: [],
  // 模式
  mode: 'development'
  // mode:"production",
}

// index.css
body {
  background-color: pink;
}
// index.less
.text{
  color: rgb(57, 14, 213);
}

index.css打包后的样式在build.js的样子，就是压缩后的字符串样式：

// index.js
// 入口文件引入样式文件
import "./index.css"
import "./index.less"
// import "./index.sass"

在浏览器中打开index.html webpack打包样式成功！