webpack打包后的文件夹是空的_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、这是所有安装的插件以及版本，因为插件版本出现很多次问题，所以需要注意一下