webpack单独打包一个less文件

需要将btn.less文件用webpack打包后，放到项目中。在网上百度了各种，遇到了很多问题，现在我将整个步骤整理如下：

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

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

2、创建package.json文件，在该文件夹下运行：

npm init

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

main.js

import './btn.less';

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

4、在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

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

6、如果要压缩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
 })

7、这是所有安装的插件以及版本，因为插件版本出现很多次问题，所以需要注意一下

转载于:https://www.cnblogs.com/fangnianqin/p/9836849.html