para - etiquetas css

Cómo sperates menos archivos en un archivo css con webpack 2?

Question

Puedo compilar menos en la página dentro del <style></style> por webpack2. pero no puedo compilar menos archivos en un archivo CSS.

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;

Pero da los siguientes errores:

Si no uso ExtractTextPlugin en las rules use loader , puede compilarse a la etiqueta de estilo. ¿Dónde está yendo mal?

Answer 1

Lo siento, lo arreglé!

definir:

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

módulo:

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

enchufar:

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