From 3755693be0be520deaf92d566f7e5e00d71fdcf5 Mon Sep 17 00:00:00 2001
From: zhoudw <zhoudw@infobird.com>
Date: Mon, 10 Jan 2022 15:50:59 +0800
Subject: [PATCH] 打包
---
build/webpack.prod.conf.js | 253 ++++++++++++++++++++++++++-----------------------
1 files changed, 134 insertions(+), 119 deletions(-)
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index d9f99f6..77351b7 100644
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -11,135 +11,150 @@
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const env = require('../config/prod.env')
+// const env = require('../config/prod.env')
+const env =
+ process.env.NODE_ENV_SELF === "production" ?
+ require("../config/prod.env") : process.env.NODE_ENV_SELF === 'test' ?
+ require("../config/test.env") : require("../config/dev.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: 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
- }),
- new UglifyJsPlugin({
- uglifyOptions: {
- compress: {
- warnings: false
- }
- },
- sourceMap: config.build.productionSourceMap,
- parallel: true
- }),
- // extract css into its own file
- new ExtractTextPlugin({
- filename: utils.assetsPath('css/[name].[contenthash].css'),
- // Setting the following option to `false` will not extract CSS from codesplit chunks.
- // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
- // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
- // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
- allChunks: true,
- }),
- // 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
- // see https://github.com/ampedandwired/html-webpack-plugin
- new HtmlWebpackPlugin({
- filename: config.build.index,
- template: 'index.html',
- inject: true,
- minify: {
- removeComments: true,
- collapseWhitespace: true,
- removeAttributeQuotes: true
- // more options:
- // https://github.com/kangax/html-minifier#options-quick-reference
- },
- // necessary to consistently work with multiple chunks via CommonsChunkPlugin
- chunksSortMode: 'dependency'
- }),
- // keep module.id stable when vendor modules does not change
- new webpack.HashedModuleIdsPlugin(),
- // enable scope hoisting
- new webpack.optimize.ModuleConcatenationPlugin(),
- // split vendor js into its own file
- 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
- )
- }
- }),
- // extract webpack runtime and module manifest to its own file in order to
- // prevent vendor hash from being updated whenever app bundle is updated
- 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
- }),
+ module: {
+ rules: utils.styleLoaders({
+ sourceMap: config.build.productionSourceMap,
+ extract: true,
+ usePostCSS: true
+ })
+ },
+ devtool: config.build.productionSourceMap ? config.build.devtool : false,
+ output: {
+ // path: config.build.assetsRoot,
+ //区分开发环境与生产环境或测试环境
+ path: process.env.NODE_ENV_SELF === "production" ?
+ config.build.assetsRoot : process.env.NODE_ENV_SELF === 'test' ?
+ config.build_test.assetsRoot : config.build_dev.assetsRoot,
- // copy custom static assets
- new CopyWebpackPlugin([
- {
- from: path.resolve(__dirname, '../static'),
- to: config.build.assetsSubDirectory,
- ignore: ['.*']
- }
- ])
- ]
+ 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
+ }),
+ new UglifyJsPlugin({
+ uglifyOptions: {
+ compress: {
+ warnings: false
+ }
+ },
+ sourceMap: config.build.productionSourceMap,
+ parallel: true
+ }),
+ // extract css into its own file
+ new ExtractTextPlugin({
+ filename: utils.assetsPath('css/[name].[contenthash].css'),
+ // Setting the following option to `false` will not extract CSS from codesplit chunks.
+ // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+ // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
+ // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+ allChunks: false,
+ }),
+ // 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
+ // see https://github.com/ampedandwired/html-webpack-plugin
+ new HtmlWebpackPlugin({
+ // filename: config.build.index,
+ filename: process.env.NODE_ENV_SELF === "production" ?
+ config.build.index : process.env.NODE_ENV_SELF === "test" ?
+ config.build_test.index : config.build_dev.index,
+
+ template: 'index.html',
+ inject: true,
+ favicon: './favicon.ico',
+ minify: {
+ removeComments: true,
+ collapseWhitespace: true,
+ removeAttributeQuotes: true
+ // more options:
+ // https://github.com/kangax/html-minifier#options-quick-reference
+ },
+ // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+ chunksSortMode: 'dependency'
+ }),
+ // keep module.id stable when vendor modules does not change
+ new webpack.HashedModuleIdsPlugin(),
+ // enable scope hoisting
+ new webpack.optimize.ModuleConcatenationPlugin(),
+ // split vendor js into its own file
+ 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
+ )
+ }
+ }),
+ // extract webpack runtime and module manifest to its own file in order to
+ // prevent vendor hash from being updated whenever app bundle is updated
+ 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
+ }),
+
+ // copy custom static assets
+ new CopyWebpackPlugin([{
+ from: path.resolve(__dirname, '../static'),
+ // to: config.build.assetsStaticPath,
+ to: process.env.NODE_ENV_SELF === "production" ?
+ config.build.assetsStaticPath : process.env.NODE_ENV_SELF === "test" ?
+ config.build_test.assetsStaticPath : config.build_dev.assetsStaticPath,
+ ignore: ['.*']
+ }])
+ ]
})
if (config.build.productionGzip) {
- const CompressionWebpackPlugin = require('compression-webpack-plugin')
+ 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
- })
- )
+ 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())
+ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+ webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
--
Gitblit v1.8.0