webpack配置 css单独分离打包

Step1安装插件

npm i extract-text-webpack-plugin

• webpack.config.js 配置

const ExtractPlugin = require('extract-text-webpack-plugin')

Step2 配置 区分环境

• 开发环境 development

• 正式环境 production

• 正式环境中 去掉style-loader ，因为style-loader是将css-loader处理后的内容外面包了一层javascript代码，这个javascript代码就是把css写进html里，写成style标签的。正式环境需要拆分出单独的css文件，所以不需要style-loader

config.module.rules.push({
        test: /\.styl/,
        use: ExtractPlugin.extract({
            fallback: 'style-loader',
            use: [
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true,
                    }
                },
                'stylus-loader'
            ]
        })
    })

• 需要添加一个插件 plugins

config.plugins.push(
    new ExtractPlugin('style.[contentHash:8].css')
)

Step3 hash 、chunkhash 区别

• hash 使用在开发环境中
• chunkhash 使用在正式环境中

config.output.filename = '[name].[chunkhash:8].js',

.vue 文件中的 style 样式没有被拆分出来

• 这是vue的设定，在vue-loader处理中，根据每个组件，每个样式，当组件显示，才会显示组件样式，当异步组件加载时，样式也会被异步加载进来，好处是节省流量