loaer使用注意事项

1、style-loader不能实现样式修改的热更新，需要安装vue-style-loader，（好像没啥区别，我config配置了热更新其实是可以实现修改css热更新的）

2、ramraf 每次打包之前删除上一次的dist
在package.json文件的scripts中，添加
"clean":"rimraf dist",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js",
"build":"npm run clean && npm run build:client",
当执行npm run build 的时候，就会先执行clean命令

3、单独把vue文件中的css打包成一个css文件
在webpack.config.client.js中
           const ExtractPlugin = require('extract-text-webpack-plugin')//引入插件
            module:{
            rules:[
                {
                    // 生产环境下单独把css打包出来
                    test:/\.styl/,
                    use:ExtractPlugin.extract({
                        fallback:'vue-style-loader',
                        use:[
                            'css-loader',
                            {
                                loader:'postcss-loader',
                                options:{
                                    sourceMap:true,
                                }
                            },
                            'stylus-loader',//识别stylu预处理（一层层往上处理）
                        ]
                    })
                }
            ]
        },
        plugins:defaultPlugin.concat([
            new ExtractPlugin('styles.[contentHash:8].css'),//单独打包css
        ])