这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

分离css

将css分离出来,单独打包成文件,可以用于缓存等操作
安装 – extract-text-webpack-plugin
分离css要区分生产环境和开发环境,开发环境可以和js混在一起,但是生产环境需要将css单独打包
打包之后可在生产目录多一个styles.c6747ed3.css的文件,这个文件中没有将.vue文件中的style样式打包,因为vue自己处理的,在挂件显示的时候加载这个样式,方便做异步组件,节省流量等,若是需要也可以将这部分代码单独打包出来

//开发环境配置
config.module.rules.push({
    test: /\.styl$/,
    use: [
        'style-loader',
        'css-loader',
        {
            loader: "postcss-loader",
            options: {
                sourceMap: true //因为使用stylus-loader会生成map文件，因此postcss-loader就不必再生成，直接使用就可以了
            }
        },
        'stylus-loader'
    ]
})
复制代码

//生产环境
config.module.rules.push({
    test: /\.styl$/,
    use: ExtractPlugin.extract({
        fallback:'style-loader',
        use:[
            'css-loader',
            {
                loader: "postcss-loader",
                options: {
                    sourceMap: true
                }
            },
            'stylus-loader'
        ]
    })
})
config.plugins.push(
    new ExtractPlugin('styles.[contentHash:8].css')
)
复制代码

output优化

在开发环境,可以直接使用个hash,但是生产环境需要使用chunkhash
打包之后可在生产目录多一个main.f8a5f51d.js的文件

//开发环境
output: {
    filename: 'bundle.[hash:8].js',
    path: path.join(__dirname, 'dist')
}
复制代码

//生产环境
output: {
    filename: 'bundle.[chunkhash:8].js',
    path: path.join(__dirname, 'dist')
}
复制代码

hash和chunkhash
- 若是output中filename使用hash,则打包出来的文件的hash指都是一样的,hash代表的是整个应用的hash,每次打包应用的hash值都会变
- 若是使用chunkhash,则打包出来的文件的hash值是不一样的,chunk hash代表的是每个文件的hash,
- 使用不同的entry或者打包类库文件的时候必须使用chunkhash,否则使用hash每次都会全部冲重新生产,没有意义,业务代码更改导致类库的都跟着变

类库文件处理

因为类库文件是非常稳定的,在开发过程中基本是不会进行版本升级的,而业务代码是非常灵活多变的,需要经常更改,所以希望将类库文件和业务逻辑文件进行区别打包,这样可以使浏览器很好的缓存类库文件

//生产环境
//vendor可以增加多个,若是使用vuex.vue-router等,也可以直接放入
config.entry = {
    app:path.join(__dirname,'src/index.js'),
    vendor:['vue','element-ui']
}

config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
        name:'vendor' //需要和entry中的名字保持一致.否则识别不了
    })
)
复制代码

单独打包webpack文件

将webpack的生成在app.js中的代码单独打包到一个文件中

由于项目每插入一个模块的时候,webpack会为其添加一个id,其位置是随机的,这样会导致新插入模块之后的每一个模块的id都变了,就会导致打包的内容和hash变化,不利于浏览器缓存

//vendor必须放在runtime前面
config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
        name:'vendor' //需要和entry中的名字保持一致.否则识别不了
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name:'runtime'//这个名字不能和entry中的重复,否则随意取
    })
)
复制代码