我们主要设置的文件是webpack.config.js文件。
抽取成一个css文件
这个设置是提取成一个单独的style.css文件
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// other options...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
}
}
]
},
plugins: [
new ExtractTextPlugin("style.css")
]
}
抽取成多个css文件
这个设置是提取成多个单独的css文件
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// other options...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
}
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'dist/css/[name].[contenthash].css'
})
]
}