How to sperates the less file in a css file with webpack 2?

问题

I can compile the less on the page within the <style></style> by webpack2. but I can't compile the less file into a CSS file.

webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var ENV = process.env.NODE_ENV;
var port = '10101';

var commonAttr = ['common', 'markerFactory', 'sceneTransform', 'sparFactory', 'upload'];
var vendorArr = [];
for (var i = 0, l = commonAttr.length; i < l; i++) {
    vendorArr.push(path.resolve(__dirname + '/script/common/', commonAttr[i] + '.js'))
}

var config = {
    entry: {
        vendor: vendorArr,
        app: './script/app',
    },
    output: {
        path: path.resolve(__dirname, 'wds'),
        filename: '[name].bundle.js',
        publicPath: '/wds/'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        },
        // // this option will compile the less to css, and append style tag to the page
        {
            test: /\.less$/,
            use: [
                "style-loader",
                "css-loader",
                "less-loader"
            ]
        },

        // I tried to split the css file into a indenpendent file, but it didn't work
        {
            test: /\.less$/,
            use: {
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: "css-loader!less-loader",
                })
            }
        },
        {
            test: /\.html$/,
            use: "handlebars-loader?helperDirs[]=" + __dirname + "/script/helpers"
        }]
    },
    plugins: [
        new ExtractTextPlugin('[name].bundle.css'),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.js"
        })
    ],
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    devServer: {
        compress: true,
        // hot: true,
        publicPath: '/wds/', //可访问的路径地址
        port: port
    }
}

if (ENV == 'development') {
    config.devtool = 'inline-source-map'; // 将模块单独编译 成 单个文件 浏览器可调试
}
else {
    config.devtool = 'eval-source-map'; // 将模块压缩一个文件一行 打包进bundle
}

var compiler = webpack(config);

module.exports = config;

But it gives the following errors:

If I don't use the ExtractTextPlugin in rules use loader, it can compile to style tag. Where is this going wrong?

回答1:

Sorry, I fixed it!

define:

    var extractLESS = new ExtractTextPlugin('[name].bundle.css');

module:

    rules:[{
            test: /\.less$/,
            use: extractLESS.extract([ 'css-loader', 'less-loader' ])
        }]

plugin:

plugins: [
    extractLESS,
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        filename: "vendor.js"
    })
],

来源：https://stackoverflow.com/questions/42246408/how-to-sperates-the-less-file-in-a-css-file-with-webpack-2

标签

css

Webpack

less

extract

loader