vue官方学习网站: https://cn.vuejs.org/
1.文件中的css会打包成了js形式
(1)安装插件extract-text-webpack-plugin
cnpm install --save extract-text-webpack-plugin
(2)在webpack.config.js 中引入一个常量
const ExtractPlugin = require('extract-text-webpack-plugin')
注:该插件的功能是把非JavaScript代码单独打包成静态资源文件,这些文件有可能做静态资源缓存,或是通过JavaScript写入浏览器缓存,对效率有影响,
(3)对stylus区分环境,进行设置
//先删除module.rules,中设置styl相关的内容
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
]
}
在控制变量环境的方式中根据坏境不同,添加设置
if(isDev) {
//此时是开发环境
config.module.rules.push( {
test:/\.styl/,
use:[
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
]
})
//如果是开发环境,把stylus的设置直接push到module.rules中,
config.devtool ='#cheap-module-eval-source-map'//用来在页面上调试代码
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true,
},
hot: true
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
} else {
//此时是正式环境,else也是新添加的,这里是新添加了一个extract插件
config.module.rules(
{
test:/\.styl/,
use:ExtractPlugin.extract({
fallback: 'style-loader',
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
]
})
}
)
}
(4)在else中网设置的插件中新插入一个插件
else{
...
config.plugins.push(
new ExtractPlugin('styles.[contentHash:8]')
)
}
(5)改filename的名字
原来是
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
更改之后
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.[hash:8].js'
},
在正式环境使用的是chunk hash,在开发环境,即dev server环境时,不能使用chunk hash
所以要在正式环境中设置成chunk hash
else {
//此事时正式环境
config.output.filename = '[name].[chunkhash:8].js'
...
至此分离完成