webpack单独打包一个less文件

须要将btn.less文件用webpack打包后，放到项目中。在网上百度了各类，遇到了不少问题，如今我将整个步骤整理以下：

一、建一个空的文件夹，命名为init_webpack，在该文件夹下运行：
这里须要注意，安装的是3.xx版本的webpack，安装4以上版本会跟extract-text-webpack-plugin插件有冲突

//全局安装webpack
npm install  -g  webpack@3
//在你的项目目录下安装
npm install --save-dev webpack@3

二、建立package.json文件，在该文件夹下运行：

npm init

三、在init_webpack文件夹下建一个src文件夹，里面建一个main.js做为入口文件，将须要打包的btn.less也放入该文件夹下，如图所示

main.js

import './btn.less';

我用的webstorm，这里须要设置下javascript的版本，如图：

四、在init_webpack文件夹下建建一个webpack.config.js文件

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
module.exports = {
  entry: './src/main.js',   
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader'],
        }),
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: true
              }
            },
            "less-loader"
          ]
        })
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin("btn.css")
  ]
};

这里须要安装几个插件
extract-text-webpack-plugin、css-loader、less、less-loader

五、运行webpack打包，dist文件夹中的btn.css就是打包后的文件

六、若是要压缩btn.css文件
安装插件：
npm install --save-dev optimize-css-assets-webpack-plugin@3

在webpack.config.js文件中加入以下代码：

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

如下这段加在plugins中：

new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
      canPrint: true
 })

七、这是全部安装的插件以及版本，由于插件版本出现不少次问题，因此须要注意一下