vue服务端渲染，提取css单独打包的好处就不说了，在这里主要说的是抽取css的方法
要从 *.vue 文件中提取 CSS，可以使用 vue-loader 的 extractCSS 选项（需要 vue-loader12.0.0+）
// webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin') // CSS 提取应该只用于生产环境
// 这样我们在开发过程中仍然可以热重载
const isProduction = process.env.NODE_ENV === 'production' module.exports = {
// ...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// enable CSS extraction
extractCSS: isProduction
}
},
// ...
]
},
plugins: isProduction
// 确保添加了此插件！
? [new ExtractTextPlugin({ filename: 'common.[chunkhash].css' })]
: []
}
请注意，上述配置仅适用于 *.vue 文件中的样式，然而你也可以使用 <style src="./foo.css"> 将外部 CSS 导入 Vue 组件。
如果你想从 JavaScript 中导入 CSS，例如，import 'foo.css'，你需要配置合适的 loader：
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
// 重要：使用 vue-style-loader 替代 style-loader
use: isProduction
? ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
: ['vue-style-loader', 'css-loader']
}
]
},
// ...
}