vue脚手架初始化项目中配置文件webpack.prod.conf.js代码含义
2018-06-08 19:47
1036 查看
'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') const ExtractTextPlugin = require('extract-text-webpack-plugin') const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const env = require('../config/prod.env') const webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true, usePostCSS: true }) }, devtool: config.build.productionSourceMap ? config.build.devtool : false, //最终生成的路径都是基于output.path output: { path: config.build.assetsRoot, // 编译输出文件名格式 filename: utils.assetsPath('js/[name].[chunkhash].js'), // 没有指定输出名的文件输出的文件名格式 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, plugins: [ new webpack.DefinePlugin({ 'process.env': env//生产环境下 }), new UglifyJsPlugin({//压缩代码 uglifyOptions: { compress: { warnings: false } }, sourceMap: config.build.productionSourceMap, parallel: true }), //提取css文件 new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), allChunks: true,//设置为“false”时,不会提取CSS。CSS将被webpack使用style-loader动态加载。 }), //压缩提取的CSS文件,删除不同组件中重复的CSS代码。 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), //以src/index.html为模板,将打包后的结果,自动引入到html中并产出到dist目录下。 new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }), new webpack.HashedModuleIdsPlugin(), new webpack.optimize.ModuleConcatenationPlugin(), //多入口文件,可能存在重复代码,把公共代码分类提取到不同的文件 // CommonsChunkPlugin初始化常用参数? // name: 这个给公共代码的chunk唯一的标识 // filename,如何命名打包后生产的js文件,也是可以用上[name]、[hash]、[chunkhash] // minChunks,公共代码的判断标准:某个js模块被多少个chunk加载了才算是公共代码 new webpack.optimize.CommonsChunkPlugin({ //位于node_modules中的必需的第三方模块将被提取到vendor.js文件。 name: 'vendor', minChunks (module) { return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), new webpack.optimize.CommonsChunkPlugin({ // webpack runtime and module manifest 将被提取到manifest.js文件。 name: 'manifest', minChunks: Infinity }), new webpack.optimize.CommonsChunkPlugin({ //其它公共代码提取到app.js中 name: 'app', async: 'vendor-async', children: true, minChunks: 3 }), // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) ] }) // gzip模式下引入compression插件进行压缩 if (config.build.productionGzip) { const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ) } if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } module.exports = webpackConfig阅读更多
相关文章推荐
- 底层:vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
- vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
- vue-cli脚手架build目录中的webpack.dev.conf.js配置文件
- vue-cli脚手架build目录中的webpack.base.conf.js配置文件
- vue-cli的webpack模板项目配置文件分析
- vue-cli创建的项目不需要再创建webpack-config.js文件,因为已经配置过了
- vue-cli脚手架中webpack配置基础文件
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件说明
- vue-cli的webpack模板项目配置文件分析
- 16.如何做到webpack打包vue项目后,可以修改配置文件
- vue-cli脚手架中webpack配置基础文件详解
- vue-cli的webpack模板项目配置文件的理解
- [置顶] vue-cli的webpack模板项目配置文件分析
- csdn上看到的一篇关于vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue + webpack 构建项目配置文件小记