webpack怎么打包less文件为css

webpack怎么打包less文件
新建一个文件夹初始化输入命令

npm init -y

写入

下载插件 (webpack4.0以后的打包css文件)

npm i mini-css-extract-plugin -D

引入

const Minicss = require("mini-css-extract-plugin")

写入

const css = new Minicss({
  // 输出css独立文件
  filename: "./css/[name].css",
  chunkFilename: "[name].css" // 或者id
})

在module.exports = {} 写入口路径跟出口路径

在module下面的rules配置(同样写在module.exports = {}下面一起导出来)

   module:{
    rules:[
      {
      test: /\.(css|less|sass)$/,  // 连在一起写法// 匹配特定文件的正则表达式或正则表达式数组
      use: [
        MiniCssExtractPlugin.loader,
        {loader: 'css-loader'},
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true
            },
          },
          {
            loader:'sass-loader',
            options:{
              javascriptEnabled: true
            }
          }
        ]
      },
    ],
  },

记得在创建plugins(同样一起导出来)下面写入css

 plugins: [css]

输入命令你npm run build 实现打包,打包如图

注意：less文件必须使用否责无法webpack无法打包(安装的less,less-loader,css-loader版本不要太高否责会报错)