Question

webpack2 vue 中的css 怎么抽取出来

Answer 1

每个 entry 只能抽取对应的单个文件，可以加上 [name], [id] or [contenthash] 如：new ExtractTextPlugin('[name].css')。其实很多由 gulp 或 grunt 转到 webpack 的都会感觉抽取 css 很麻烦，不过官方都是建议这样在 entry 中依赖 css 然后用 ExtractTextPlugin 抽取出来。不过下面这个简单的 hack 可以让 webpack 支持 entry 是 css 文件的：
class CssEntryPlugin {
apply (compiler) {
compiler.plugin('emit', (compilation, callback) => {
compilation.chunks.filter(chunk => {
return /\.css$/i.test(chunk.name);
}).forEach(chunk => {
const oldName = chunk.name;
const newName = oldName.replace(/\.css$/i, '');

chunk.files = chunk.files.filter(file => {
const isCss = /\.css(|\.map)$/i.test(file);
if (!isCss) {
delete compilation.assets[file];
}
return isCss;
}).map(oldFile => {
// do not handle map file
if (/\.map$/i.test(oldFile)) return oldFile;

const newFile = oldFile.replace(oldName, newName);
// change css assets name
const tmp = compilation.assets[oldFile];
compilation.assets[newFile] = tmp;
delete compilation.assets[oldFile];
return newFile;
});
});
callback();
});
}
}

这样 entry 可以这么写：

{
entry: {
'index.css': './index.less'
}
}