vue-cli+webpack打包配置
2017-12-14 23:29 龙恩0707 阅读(15184) 评论(1) 编辑 收藏 举报vue-cli+webpack打包配置
一: 目录结构:
├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ ├── test.env.js │ └── prod.env.js │ ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ │── router │ │ └── index.js │ └── main.js ├── static ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js
二:指令分析:
2-1 先看 package.json 里面的scripts的字段
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "test": "npm run unit", "lint": "eslint --ext .js,.vue src test/unit/specs", "build": "node build/build.js" }
运行 npm run dev 后,会执行开发环境打包,就会执行 build文件夹下的 webpack.dev.conf.js代码,运行 npm run build后,
会进行正式环境打包, 执行build/build.js文件代码。我们首先来看下 webpack的配置。
三:webpack配置
3-1 webpack.base.conf.js
入口文件 entry 代码如下:
entry: { app: './src/main.js' }
输出文件 output 代码如下:
output: { path: config.build.assetsRoot, // 导出目录的绝对路径 在项目的根目录下 会新建dist文件夹 filename: '[name].js', // 导出文件的文件名 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }
如上代码 config; 在页面上引入代码: const config = require('../config'); 我们可以打开config下的index.js查看下代码就可以明白
了,如果是正式环境 publicPath = config.build.assetsPublicPath, 如果是开发环境 publicPath = config.dev.assetsPublicPath;publicPath 是虚拟目录,自动指向path编译的目录。比如在正式环境打包会生成
dist
static
css
js
index.html
生成如上的目录,那么设置 publicPath 为 './', 那么在index.html引入的路径就变为 ./css/xx.css, js路径变为 ./js/xx.js
, 直接打开index.html就可以访问到 css 和 对应的js的。
如果是开发环境,设置 publicPath为 '/',那么在开发环境 访问页面; 比如 http://localhost:8080; 那么js路径就是
http://localhost:8080/app.js了;
文件解析 resolve (主要设置模块如何被解析)
// 设置模块如何被解析 resolve: { // 自动解析确定的扩展名,导入模块时不带扩展名 extensions: ['.js', '.vue', '.json'], // 创建import 或 require的别名 /* 比如如下文件 src components a.vue router home index.vue 在index.vue里面,正常引用A组件;如下: import A from '../../components/a.vue'; 如果设置了 alias后,那么引用的地方可以如下这样了 import A from '@/components/a.vue'; 注意:这里的 @ 起到了 resolve('src')路径的作用了。 */ alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }
模块解析module (处理项目不同类型的模块)
module: { rules: [ // 在开发环境下 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件),使用eslint进行文件语法检测。 ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, // vue 文件后缀的 loader: 'vue-loader', // 使用vue-loader处理 options: vueLoaderConfig // options是对vue-loader做的额外选项配置 文件配置在 ./vue-loader.conf 内可以查看代码 }, { test: /\.js$/, // js文件后缀的 loader: 'babel-loader', // 使用babel-loader处理 include: [resolve('src'), resolve('test')] // 包含src和test的文件夹 }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 处理图片后缀 loader: 'url-loader', // 使用url-loader处理 options: { limit: 10000, // 图片小于10000字节时以base64的方式引用 name: utils.assetsPath('img/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名 } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, // 音频文件后缀 loader: 'url-loader', options: { limit: 10000, // 小于10000字节时的时候处理 name: utils.assetsPath('media/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名 } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字体文件 loader: 'url-loader', options: { limit: 10000, // 字体文件小于10000字节的时候处理 name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名 } } ] }
webpack.base.conf.js代码如下:
'use strict'; const path = require('path'); const utils = require('./utils'); const config = require('../config'); const vueLoaderConfig = require('./vue-loader.conf'); function resolve (dir) { return path.join(__dirname, '..', dir); } /* 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件),使用eslint进行文件语法检测。 */ const createLintingRule = () => ({ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: !config.dev.showEslintErrorsInOverlay } }); module.exports = { entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, // 导出目录的绝对路径 filename: '[name].js', // 导出文件的文件名 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, // 设置模块如何被解析 resolve: { // 自动解析确定的扩展名,导入模块时不带扩展名 extensions: ['.js', '.vue', '.json'], // 创建import 或 require的别名 /* 比如如下文件 src components a.vue router home index.vue 在index.vue里面,正常引用A组件;如下: import A from '../../components/a.vue'; 如果设置了 alias后,那么引用的地方可以如下这样了 import A from '@/components/a.vue'; 注意:这里的 @ 起到了 resolve('src')路径的作用了。 */ alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, module: { rules: [ // 在开发环境下 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件),使用eslint进行文件语法检测。 ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, // vue 文件后缀的 loader: 'vue-loader', // 使用vue-loader处理 options: vueLoaderConfig // options是对vue-loader做的额外选项配置 文件配置在 ./vue-loader.conf 内可以查看代码 }, { test: /\.js$/, // js文件后缀的 loader: 'babel-loader', // 使用babel-loader处理 include: [resolve('src'), resolve('test')] // 包含src和test的文件夹 }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 处理图片后缀 loader: 'url-loader', // 使用url-loader处理 options: { limit: 10000, // 图片小于10000字节时以base64的方式引用 name: utils.assetsPath('img/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名 } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, // 音频文件后缀 loader: 'url-loader', options: { limit: 10000, // 小于10000字节时的时候处理 name: utils.assetsPath('media/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名 } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字体文件 loader: 'url-loader', options: { limit: 10000, // 字体文件小于10000字节的时候处理 name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名 } } ] }, node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } };
对webpack.base.conf中的 const vueLoaderConfig = require('./vue-loader.conf');
vue-loader.conf.js 代码如下:
'use strict'; const utils = require('./utils'); const config = require('../config'); // 判断是否是生产环境 const isProduction = process.env.NODE_ENV === 'production'; const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap; module.exports = { // 处理 .vue文件中的样式 loaders: utils.cssLoaders({ // 是否打开 source-map sourceMap: sourceMapEnabled, // 是否提取样式到单独的文件 extract: isProduction }), cssSourceMap: sourceMapEnabled, cacheBusting: config.dev.cacheBusting, transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' } };
3-2 webpack.dev.conf.js
开发环境下的 webpack配置,通过merge方法合并 webpack.base.conf.js 基础配置。
一些代码如下:
'use strict'; const utils = require('./utils'); const webpack = require('webpack'); const config = require('../config'); // webpack-merge是一个可以合并数组和对象的插件 const merge = require('webpack-merge'); const baseWebpackConfig = require('./webpack.base.conf'); module.exports = merge(baseWebpackConfig, {})
模块配置
module: { // 通过传入一些配置来获取rules配置,此处传入了sourceMap: false,表示不生成sourceMap rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }
在utils.styleLoaders中的配置如下
/* 生成style-loader的配置 style-loader文档:https://github.com/webpack/style-loader @method styleLoaders @param {Object} options生成的配置 @return {Array} style-loader的配置 */ exports.styleLoaders = function (options) { const output = []; // 定义返回的数组,数组中保存的是针对各类型的样式文件的处理方式 const loaders = exports.cssLoaders(options); // 调用cssLoaders方法返回各类型的样式对象(css: loader) for (const extension in loaders) { // 循环遍历loaders const loader = loaders[extension]; // 根据遍历获得的key(extension)来得到value(loader) output.push({ test: new RegExp('\\.' + extension + '$'), // 处理的文件类型 use: loader // 用loader来处理,loader来自loaders[extension] }); } return output; };
上面的代码中调用了exports.cssLoaders(options),用来返回针对各类型的样式文件的处理方式
如下代码:
/* * 生成处理css的loaders配置 * @method cssLoaders * @param {Object} options 生成的配置 options = { // 是否开启 sourceMap sourceMap: true, // 是否提取css extract: true } @return {Object} 处理css的loaders的配置对象 */ exports.cssLoaders = function (options) { options = options || {}; const cssLoader = { loader: 'css-loader', options: { // options是loader的选项配置 // 根据参数是否生成sourceMap文件 生成环境下压缩文件 sourceMap: options.sourceMap } }; const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } }; // generate loader string to be used with extract text plugin /* 生成ExtractTextPlugin对象或loader字符串 @method generateLoaders @param {Array} loader 名称数组 @return {String | Object} ExtractTextPlugin对象或loader字符串 */ function generateLoaders (loader, loaderOptions) { // 生成loader // 默认是css-loader const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]; if (loader) { // 如果参数loader存在 loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { // 将loaderOptions和sourceMap组成一个对象 sourceMap: options.sourceMap }) }); } // Extract CSS when that option is specified // (which is the case during production build) // 当extract为true时,提取css,生成环境中,默认为true if (options.extract) { // 如果传入的options存在extract且为true return ExtractTextPlugin.extract({ // ExtractTextPlugin分离js中引入的css文件 use: loaders, // 处理的loader fallback: 'vue-style-loader' // 没有被提取分离时使用的loader }); } else { return ['vue-style-loader'].concat(loaders); } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html // 返回css类型对应的loader组成的对象 generateLoaders()来生成loader return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }; };
在styleLoaders函数内 执行 const loaders = exports.cssLoaders(options); 调用cssLoaders方法返回各类型的样式对象(css: loader);所以最终loaders 会返回如下对象:
loaders = { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') };
执行generateLoaders()函数后,又会返回代码中的对象;如果是正式环境的话,css会分离;因此会返回如下的js对象:
return ExtractTextPlugin.extract({ // ExtractTextPlugin分离js中引入的css文件 use: loaders, // 处理的loader fallback: 'vue-style-loader' // 没有被提取分离时使用的loader });
如果是开发环境下的话;会返回:
return ['vue-style-loader'].concat(loaders);
最后 在 styleLoaders函数中;会进行loaders循环;如下:
for (const extension in loaders) { // 循环遍历loaders const loader = loaders[extension]; // 根据遍历获得的key(extension)来得到value(loader) output.push({ test: new RegExp('\\.' + extension + '$'), // 处理的文件类型 use: loader // 用loader来处理,loader来自loaders[extension] }); }
最后返回 output, 返回的数组,数组中保存的是针对各类型的样式文件的处理方式。
插件配置如下代码:
plugins: [ new webpack.DefinePlugin({ // 编译时配置的全局变量 'process.env': require('../config/dev.env') // 当前环境为开发环境 }), // 开启webpack热更新功能 new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. // webpack编译过程中出错的时候跳过报错阶段,不会阻塞编译,在编译结束后报错 new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin // 自动将依赖注入html模板,并输出最终的html文件到目标文件夹 new HtmlWebpackPlugin({ filename: 'index.html', // 生成的文件名 template: 'index.html', // 模板 inject: true }) ]
下面是 webpack.dev.conf.js 所有的代码:
'use strict'; const utils = require('./utils'); const webpack = require('webpack'); const config = require('../config'); // webpack-merge是一个可以合并数组和对象的插件 const merge = require('webpack-merge'); const baseWebpackConfig = require('./webpack.base.conf'); // html-webpack-plugin用于将webpack编译打包后的产品文件注入到html模板中 // 即自动在index.html里面加上<link>和<script>标签引用webpack打包后的文件 const HtmlWebpackPlugin = require('html-webpack-plugin'); // friendly-errors-webpack-plugin用于更友好地输出webpack的警告、错误等信息 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); const portfinder = require('portfinder'); const HOST = process.env.HOST; const PORT = process.env.PORT && Number(process.env.PORT); // 开发环境下的webpack配置,通过merge方法合并webpack.base.conf.js基础配置 const devWebpackConfig = merge(baseWebpackConfig, { module: { // 通过传入一些配置来获取rules配置,此处传入了sourceMap: false,表示不生成sourceMap rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, // cheap-module-eval-source-map is faster for development // 使用这种source-map更快 devtool: config.dev.devtool, // these devServer options should be customized in /config/index.js devServer: { clientLogLevel: 'warning', historyApiFallback: true, hot: true, compress: true, host: HOST || config.dev.host, port: PORT || config.dev.port, open: config.dev.autoOpenBrowser, overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false, publicPath: config.dev.assetsPublicPath, proxy: config.dev.proxyTable, quiet: true, // necessary for FriendlyErrorsPlugin watchOptions: { poll: config.dev.poll } }, plugins: [ new webpack.DefinePlugin({ // 编译时配置的全局变量 'process.env': require('../config/dev.env') // 当前环境为开发环境 }), // 开启webpack热更新功能 new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. // webpack编译过程中出错的时候跳过报错阶段,不会阻塞编译,在编译结束后报错 new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin // 自动将依赖注入html模板,并输出最终的html文件到目标文件夹 new HtmlWebpackPlugin({ filename: 'index.html', // 生成的文件名 template: 'index.html', // 模板 inject: true }) ] }); module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port; portfinder.getPort((err, port) => { if (err) { reject(err); } else { // publish the new Port, necessary for e2e tests process.env.PORT = port; // add port to devServer config devWebpackConfig.devServer.port = port; // Add FriendlyErrorsPlugin devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ // 友好的错误提示 compilationSuccessInfo: { messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`] }, onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined })); resolve(devWebpackConfig); } }); });
3-3 webpack.prod.conf.js
生产环境下的webpack配置,通过merge方法合并webpack.base.conf.js基础配置
如下代码:
const path = require('path'); const utils = require('./utils'); const webpack = require('webpack'); // 配置文件 const config = require('../config'); // webpack 配置合并插件 const merge = require('webpack-merge'); // webpack 基本配置 const baseWebpackConfig = require('./webpack.base.conf'); const webpackConfig = merge(baseWebpackConfig, {});
module的处理,主要是针对css的处理, 同样的此处调用了 utils.styleLoaders;
module: { // styleLoaders rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true, usePostCSS: true }) }
输出文件output
output: { // 编译输出的静态资源根路径 创建dist文件夹 path: config.build.assetsRoot, // 编译输出的文件名 filename: utils.assetsPath('js/[name].[chunkhash].js'), // 没有指定输出名的文件输出的文件名 或可以理解为 非入口文件的文件名,而又需要被打包出来的文件命名配置,如按需加载的模块 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }
webpack.prod.conf.js 所有代码如下:
'use strict'; // node自带的文件路径工具 const path = require('path'); const utils = require('./utils'); const webpack = require('webpack'); // 配置文件 const config = require('../config'); // webpack 配置合并插件 const merge = require('webpack-merge'); // webpack 基本配置 const baseWebpackConfig = require('./webpack.base.conf'); // webpack 复制文件和文件夹的插件 // https://github.com/kevlened/copy-webpack-plugin const CopyWebpackPlugin = require('copy-webpack-plugin'); // 自动生成 html 并且注入到 .html 文件中的插件 // https://github.com/ampedandwired/html-webpack-plugin const HtmlWebpackPlugin = require('html-webpack-plugin'); // 提取css的插件 // https://github.com/webpack-contrib/extract-text-webpack-plugin const ExtractTextPlugin = require('extract-text-webpack-plugin'); // webpack 优化压缩和优化 css 的插件 // https://github.com/NMFR/optimize-css-assets-webpack-plugin const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); // js压缩插件 const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 如果当前环境为测试环境,则使用测试环境 // 否则,使用生产环境 const env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : require('../config/prod.env'); const webpackConfig = merge(baseWebpackConfig, { module: { // styleLoaders rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true, usePostCSS: true }) }, // 是否开启 sourceMap devtool: config.build.productionSourceMap ? config.build.devtool : false, output: { // 编译输出的静态资源根路径 创建dist文件夹 path: config.build.assetsRoot, // 编译输出的文件名 filename: utils.assetsPath('js/[name].[chunkhash].js'), // 没有指定输出名的文件输出的文件名 或可以理解为 非入口文件的文件名,而又需要被打包出来的文件命名配置,如按需加载的模块 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, // 生成sourceMap文件 parallel: true }), // extract css into its own file // 将js中引入的css分离的插件 new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), // 分离出的css文件名 // set the following option to `true` if you want to extract CSS from // codesplit chunks into this main css file as well. // This will result in *all* of your app's CSS being loaded upfront. allChunks: false }), // 压缩提取出的css,并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件) // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // 将 index.html 作为入口,注入 html 代码后生成 index.html文件 引入css文件和js文件 // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, // 生成的html的文件名 template: 'index.html', // 依据的模板 inject: true, // 注入的js文件将会被放在body标签中,当值为'head'时,将被放在head标签中 minify: { // 压缩配置 removeComments: true, // 删除html中的注释代码 collapseWhitespace: true, // 删除html中的空白符 removeAttributeQuotes: true // 删除html元素中属性的引号 // 更多选项 https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin // 必须通过 CommonsChunkPlugin一致地处理多个 chunks chunksSortMode: 'dependency' // 按dependency的顺序引入 }), // keep module.id stable when vender modules does not change new webpack.HashedModuleIdsPlugin(), // enable scope hoisting new webpack.optimize.ModuleConcatenationPlugin(), // split vendor js into its own file // 分割公共 js 到独立的文件vendor中 // https://webpack.js.org/guides/code-splitting-libraries/#commonschunkplugin new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', // 文件名 minChunks (module) { // 声明公共的模块来自node_modules文件夹 // any required modules inside node_modules are extracted to vendor // node_modules中的任何所需模块都提取到vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ); } }), /* 上面虽然已经分离了第三方库,每次修改编译都会改变vendor的hash值,导致浏览器缓存失效。 原因是vendor包含了webpack在打包过程中会产生一些运行时代码,运行时代码中实际上保存了打包后的文件名。 当修改业务代码时,业务代码的js文件的hash值必然会改变。一旦改变必然 会导致vendor变化。vendor变化会导致其hash值变化。 */ // 下面主要是将运行时代码提取到单独的manifest文件中,防止其影响vendor.js new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity }), // This instance extracts shared chunks from code splitted chunks and bundles them // in a separate chunk, similar to the vendor chunk // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3 }), // 复制静态资源,将static文件内的内容复制到指定文件夹 // https://github.com/kevlened/copy-webpack-plugin new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) ] }); // 配置文件开启了gzip压缩 if (config.build.productionGzip) { // 引入压缩文件的组件,该插件会对生成的文件进行压缩,生成一个.gz文件 // https://github.com/webpack-contrib/compression-webpack-plugin const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 向webpackconfig.plugins中加入下方的插件 webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', // 目标文件名 algorithm: 'gzip', // 使用gzip压缩 test: new RegExp( // 满足正则表达式的文件会被压缩 '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, // 资源文件大于10240B=10kB时会被压缩 minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩 }) ); } // 开启包分析的情况时, 给 webpack plugins添加 webpack-bundle-analyzer 插件 if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; webpackConfig.plugins.push(new BundleAnalyzerPlugin()); } module.exports = webpackConfig;
注意: 上面的配置代码都是从vue-cli上下载下来的,每个配置的含义都是从网上资料总结出来的,为了以后项目的需要直接可以拿来使用,且记录下配置的含义;