webpack 之(3) webpack.config.js配置 之 css/less

webpack5的版本 后面有版本会单独出一篇文章

通过load打包css文件

   第一步:需要下载各种loader

  第二步:在index.html中需要引入打包好的文件built.js

/* 
webpack.config.js webpack 的配置文件 
作用:指示webpack干哪些活(当你运行webpck指令时,会加载里面的配置)
*/
const { resolve } = require('path');
module.exports = {
  //webpack配置
  /* 入口起点 */
  entry:'./src/index.js',
  //输出
  output:{
    /* 输出文件名 */
    filename:'built.js',
    /* 输出路径
    __dirname 是nodejs的变量,代表当前文件的目录绝对路径
    */
    path:resolve(__dirname,'build')
    
  },
  //loader的配置
  module: {
    rules: [
      //详细loader配置
      {
        //匹配哪些文件
        test: /\.css$/,
        use: [
          //use数组中loader执行顺序:从右到左,从下到上
          //创建style标签,将js中的样式资源插入进行,添加到head中生效
          'style-loader',
          //将css文件变成commonjs模块加载js中,里面内容是样式字符窜
          'css-loader'
        ]
      },
      {
        //匹配哪些文件
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          //将less文件编译成css文件
          //需要下载less-loader和less
          'less-loader'
        ]
      }
      
    ]
  },
  //plugins(插件的配置)
  plugins:[

  ],
  //模式 只能写一种
   mode:'development'   //开发模式
   //mode:'production'  //发布模式
}