Webpack.config
var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
entry: {
post: "./post",
about: "./about"
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js',
publicPath: './dist/',
chunkFilename: '[id].chunk.js'
},
module: {
loaders: [{
test: /\.js?$/,
loader: 'babel',
query: {
presets: ['es2015']
},
exclude: /node_modules/
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}, {
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
}]
},
plugins: [
new ExtractTextPlugin("app.css", {
allChunks: true
})
]
};
module.exports = config;
post.js
require('./post.css');
post.css
.post {
width: 100px;
height: 100px;
}
about.js
require('./about.css');
about.css
.about {
font-size: 12px;
}
使用了 ExtractTextPlugin, 最后生成了一个 app.css
.post {
width: 100px;
height: 100px;
}
好像只把post.css的内容打包进去,如何配置可以同时把post.css和about.css打包到app.css
.about {
font-size: 12px;
}
.post {
width: 100px;
height: 100px;
}
ExtractTextPlugin没有这个功能呢
再说,ExtractTextPlugin本来就是针对各个页面独有的CSS,根本就不应该打包到同一个CSS文件里(因为怕CSS冲突了)
有需要公用的CSS,可以配合CommonsChunkPlugin,有多个入口调用的话就会被归到公共的chunk里,继而被ExtractTextPlugin打包到公共的CSS文件里的了
具体可参考《webpack多页应用架构系列(三):怎么打包公共代码才能避免重复?》和《webpack多页应用架构系列(五):听说webpack连less/css也能打包?》