webpack4打包less,并分离css

需求：项目是一套普通的静态页面，不过因为要出七八套不同颜色的版本，不想手动修改，所以准备用webpack做个简单的打包工具。

解决步骤：
1、初始化package.json，安装依赖

npm init 
npm install css-loader less less-loader mini-css-extract-plugin url-loader webpack webpack-cli -D

2、新建webpack.config.js，配置如下

const resolve = require('path').resolve
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    'index' : __dirname + '/lessStyle/index.js',
    'pay' : __dirname + '/lessStyle/pay.js'
    // 因为mini-css-extract-plugin会把每个js中的css打包成一个文件，所以这里新建了多个入口文件，打包多个css文件
  },
  output: {
    path: resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test:/\.(jpg|png|gif)$/,
        use:[{
          // 处理css文件中引入的图片
          loader:"url-loader",
          options:{
              limit:50,
              outputPath:"images",  // 打包后文件相对dist文件夹的位置
              publicPath:'../images',  // 打包后css中图片的引用路径
              name: '[name].[ext]'  // 打包后的名字
          }
        }]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style/[name].css',  // 打包后从js文件中提取出来的css文件名称
    }),
  ],
  mode: 'development'
}

3、运行npx webpack，打包完成后在dist/style中达到相应的css文件，完成。

ps：
附带一些快速打包单个文件的命令：

1.命令行打包entry.js 到bundle.js

webpack src/entry.js -o dist/bundle.js --mode development

2、打包自动编译sass文件

//安装node-sass
npm i node-sass -g
npm i node-sass 

//监听src文件夹下所有sass文件，并将文件打包到style文件夹中。
 node-sass -w -r src -o style