手撕vue-cli配置——webpack.prod.conf.js篇

‘use strict‘const path = require(‘path‘)const utils = require(‘./utils‘)const webpack = require(‘webpack‘)const config = require(‘../config‘)const merge = require(‘webpack-merge‘)const baseWebpackConfig = require(‘./webpack.base.conf‘)//资源拷贝的插件const CopyWebpackPlugin = require(‘copy-webpack-plugin‘)const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)//把css打包成css文件已link的方式引入的包const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘)//压缩css的包const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin‘)//压缩js代码的包const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘)const env = require(‘../config/prod.env‘)const webpackConfig = merge(baseWebpackConfig, { ?module: { ???//loader配置，可在介绍utils的文章中查看 ???rules: utils.styleLoaders({ ?????sourceMap: config.build.productionSourceMap, ?????extract: true, ?????usePostCSS: true ???}) ?}, ?devtool: config.build.productionSourceMap ? config.build.devtool : false, ?output: { ???path: config.build.assetsRoot, ???filename: utils.assetsPath(‘js/[name].[chunkhash].js‘), ???//chunkFilename用于命名那些异步加载的模块，比如通过require.ensure() ???chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js‘) ?}, ?plugins: [ ???// http://vuejs.github.io/vue-loader/en/workflow/production.html ???//设置全局变量 ???new webpack.DefinePlugin({ ?????‘process.env‘: env ???}), ???//压缩js代码 ???new UglifyJsPlugin({ ?????uglifyOptions: { ???????compress: { ?????????warnings: false ???????} ?????}, ?????sourceMap: config.build.productionSourceMap, ?????parallel: true ???}), ???// 从所有额外的 chunk(additional chunk) 提取（默认情况下，它仅从初Zchunk(initial chunk) 中提取）当使用 CommonsChunkPlugin 并且在公共 chunk 中有提取的 chunk（来自ExtractTextPlugin.extract）时，allChunks **必须设置为 true ???new ExtractTextPlugin({ ?????filename: utils.assetsPath(‘css/[name].[contenthash].css‘), ?????allChunks: true, ???}), ???// 压缩css ???new OptimizeCSSPlugin({ ?????cssProcessorOptions: config.build.productionSourceMap ???????? { safe: true, map: { inline: false } } ???????: { safe: true } ???}), ???// 在dist目录生成html文件 ???new HtmlWebpackPlugin({ ?????filename: config.build.index, ?????template: ‘index.html‘, ?????inject: true, ?????minify: { ???????removeComments: true, ???????collapseWhitespace: true, ???????removeAttributeQuotes: true ?????}, ?????chunksSortMode: ‘dependency‘ ???}), ???// 该插件会根据模块的相对路径生成一个四位数的hash作为模块id, 建议用于生产环境 ???new webpack.HashedModuleIdsPlugin(), ???// 去 webpack 打包时的一个取舍是将 bundle 中各个模块单独打包成闭包。这些打包函数使你的 JavaScript 在浏览器中处理的更慢。相比之下，一些工具像 Closure Compiler 和 RollupJS 可以提升(hoist)或者预编译所有模块到一个闭包中，提升你的代码在浏览器中的执行速度。 ???new webpack.optimize.ModuleConcatenationPlugin(), ???// 将第三方的包分离出来 ???new webpack.optimize.CommonsChunkPlugin({ ?????name: ‘vendor‘, ?????minChunks (module) { ???????// any required modules inside node_modules are extracted to vendor ???????return ( ?????????module.resource && ?????????/\.js$/.test(module.resource) && ?????????module.resource.indexOf( ???????????path.join(__dirname, ‘../node_modules‘) ?????????) === 0 ???????) ?????} ???}), ???// 为了避免每次更改项目代码时导致venderchunk的chunkHash改变，我们还会单独生成一个manifestchunk ???new webpack.optimize.CommonsChunkPlugin({ ?????name: ‘manifest‘, ?????minChunks: Infinity ???}), ??//我们主要逻辑的js文件 ???new webpack.optimize.CommonsChunkPlugin({ ?????name: ‘app‘, ?????async: ‘vendor-async‘, ?????children: true, ?????minChunks: 3 ???}), ???// 拷贝资源 ???new CopyWebpackPlugin([ ?????{ ???????from: path.resolve(__dirname, ‘../static‘), ???????to: config.build.assetsSubDirectory, ???????ignore: [‘.*‘] ?????} ???]) ?]})module.exports = webpackConfig