webpack配置css单独分离打包——正式环境打包优化

vue官方学习网站： https://cn.vuejs.org/
1.文件中的css会打包成了js形式

如何优化

1.将css打包成一个单独的文件

（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'
    ...

至此分离完成