pref: webpack3.6.0升级4.46.0

This commit is contained in:
zhangshuai
2022-11-16 11:17:31 +08:00
parent dfd745ecdb
commit 6ef5613550
7 changed files with 4259 additions and 4080 deletions

View File

@@ -1,8 +1,9 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
//const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
@@ -45,11 +46,12 @@ exports.cssLoaders = function (options) {
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
/*return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
})*/
return [MiniCssExtractPlugin.loader].concat(loaders)
} else {
return ['vue-style-loader'].concat(loaders)
}

View File

@@ -3,6 +3,7 @@ const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
// const VueLoaderPlugin = require('vue-loader/lib/plugin')
const arg = process.env.BUILD_MODE
const devStart = process.env.npm_lifecycle_event
function resolve (dir) {
@@ -86,6 +87,9 @@ const baseConfig = {
}
]
},
// plugins: [
// new VueLoaderPlugin()
// ],
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).

View File

@@ -16,6 +16,7 @@ const devStart = process.env.npm_lifecycle_event
const indexHtml = devStart === 'dev' ? 'src/entrance/app/index.html' : 'src/entrance/exportHtml/exportHtml.html'
let devWebpackConfig = ''
devWebpackConfig = merge(baseWebpackConfig, {
mode: 'development',
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},

View File

@@ -8,9 +8,9 @@ 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 ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
// const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const fileManagerPlugin = require('filemanager-webpack-plugin')
const WebpackZipPlugin = require('webpack-zip-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
@@ -19,6 +19,12 @@ const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
const WebpackShellPlugin = require('webpack-shell-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const serverConfig = require('../static/config.json')// 引入根目录下的配置文件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const smp = new SpeedMeasurePlugin();
// const gitRevisionPlugin = new GitRevisionPlugin();
const createJson = function () {
@@ -37,6 +43,7 @@ const createConfig = function(compilation){
let webpackConfig = {}
if (arg === 'html') {
webpackConfig = merge(baseWebpackConfig, {
mode: 'production',
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
@@ -65,6 +72,10 @@ if (arg === 'html') {
new webpack.DefinePlugin({
'process.env': env
}),
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
chunkFilename: "[name].[contenthash].css"
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
@@ -78,14 +89,14 @@ if (arg === 'html') {
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
/*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({
@@ -123,11 +134,11 @@ if (arg === 'html') {
minifyJS: true // 压缩文内js
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunksSortMode: 'auto',
chunks: ['exportHtml'],
excludeChunks: ['app']
}),
new HtmlWebpackInlineSourcePlugin(),
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
new GenerateAssetPlugin({
filename: 'static/config.json',
fn: (compilation, cb) => {
@@ -177,9 +188,26 @@ if (arg === 'html') {
}
])
]
// optimization: {
// minimizer: [
// new CssMinimizerPlugin(), // 去重压缩css
// new TerserPlugin({ // 压缩JS代码
// terserOptions: {
// compress: {
// warnings: false,
// drop_console: true, // 去除console
// pure_funcs: ['console.log']
// }
// },
// exclude: /manifest.+js/,
// sourceMap: config.build.productionSourceMap,
// })
// ]
// }
})
} else if (arg === 'app') {
webpackConfig = merge(baseWebpackConfig, {
mode: 'production',
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
@@ -209,7 +237,11 @@ if (arg === 'html') {
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
new MiniCssExtractPlugin({ //替换 ExtractTextPlugin 用于css抽取
filename: utils.assetsPath('css/[name].[contenthash].css')
// chunkFilename: "[name].[contenthash].css"
}),
/* new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
@@ -220,23 +252,23 @@ if (arg === 'html') {
exclude: /manifest.+js/,
sourceMap: config.build.productionSourceMap,
parallel: true
}),
}),*/
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
/*new ExtractTextPlugin({
filename: utils.assetsPath('css/[name]_[md5:contenthash:hex:8].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 }
}),
// 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
@@ -254,7 +286,7 @@ if (arg === 'html') {
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
//chunksSortMode: 'auto',
excludeChunks: ['exportHtml']
}),
new GenerateAssetPlugin({
@@ -268,7 +300,7 @@ if (arg === 'html') {
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
/* new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
@@ -295,7 +327,7 @@ if (arg === 'html') {
async: 'vendor-async',
children: true,
minChunks: 3
}),
}),*/
// copy custom static assets
new CopyWebpackPlugin([
@@ -305,7 +337,33 @@ if (arg === 'html') {
ignore: ['*']
}
])
]
],
optimization: {
minimizer: [
new CssMinimizerPlugin(), // 去重压缩css
new TerserPlugin({ // 压缩JS代码
terserOptions: {
compress: {
warnings: false,
drop_console: true, // 去除console
pure_funcs: ['console.log']
}
},
exclude: /manifest.+js/,
sourceMap: config.build.productionSourceMap,
})
],
splitChunks: { //
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
automaticNameMaxLength: 30,
}
}
})
}
if (process.env.NODE_ENV == 'development') {
@@ -411,4 +469,6 @@ if (config.build.bundleAnalyzerReport) {
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
webpackConfig = smp.wrap(webpackConfig);
module.exports = webpackConfig

File diff suppressed because it is too large Load Diff

View File

@@ -37,6 +37,7 @@
"browserslist": "^4.21.4",
"caniuse-lite": "^1.0.30001412",
"codemirror-promql": "^0.19.0",
"css-minimizer-webpack-plugin": "^1.0.0",
"cytoscape": "^3.15.2",
"d3": "^6.7.0",
"d3-hexbin": "^0.2.2",
@@ -45,7 +46,9 @@
"echarts": "^5.2.2",
"element-ui": "^2.15.3",
"file-saver": "^2.0.2",
"html-webpack-inline-source-plugin": "0.0.10",
"happypack": "^5.0.1",
"html-webpack-inline-source-plugin": "^1.0.0-beta.2",
"html-webpack-plugin": "^4.2.0",
"html2canvas": "^1.4.1",
"intro.js": "^5.1.0",
"jspdf": "^2.5.1",
@@ -53,14 +56,15 @@
"le5le-store": "^1.0.7",
"leaflet": "^1.7.1",
"maplibre-gl": "^2.2.0",
"mini-css-extract-plugin": "^1.6.0",
"moment-timezone": "^0.5.33",
"mqtt": "4.2.6",
"node-sass": "^4.14.1",
"pl-table": "^2.5.8",
"preload": "^0.1.0",
"qrcodejs2": "0.0.2",
"quill": "^1.3.7",
"spark-md5": "^3.0.2",
"speed-measure-webpack-plugin": "^1.5.0",
"v-selectpage": "^2.1.4",
"vue": "^2.5.2",
"vue-clipboard2": "^0.3.3",
@@ -83,10 +87,10 @@
"@babel/plugin-transform-modules-commonjs": "^7.17.9",
"@vue/test-utils": "^1.0.0-beta.13",
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.0",
"babel-core": "^6.26.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^23.6.0",
"babel-loader": "^7.1.1",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-runtime": "^6.22.0",
@@ -95,47 +99,49 @@
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"css-loader": "^3.5.3",
"eslint": "^7.22.0",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-vue": "^7.7.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^5.1.0",
"filemanager-webpack-plugin": "^2.0.5",
"friendly-errors-webpack-plugin": "^1.6.1",
"generate-asset-webpack-plugin": "^0.3.0",
"git-revision-webpack-plugin": "^3.0.6",
"html-webpack-plugin": "^2.30.1",
"jest": "^24.0.0",
"jest-serializer-vue": "^0.3.0",
"jest-transform-stub": "^2.0.0",
"lodash": "^4.17.21",
"node-notifier": "^5.1.2",
"node-sass": "^4.0.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"perfect-scrollbar": "^1.5.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-loader": "^4.0.0",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.3.1",
"sass-loader": "^8.0.1",
"sass-resources-loader": "^2.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"terser-webpack-plugin": "^4.2.3",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"url-loader": "^3.0.0",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-loader": "^14.2.2",
"vue-resource": "^1.5.1",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "3.6.0",
"webpack": "^4.46.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.1",
"webpack-merge": "^4.1.0",
"webpack-parallel-uglify-plugin": "1.1.4",
"webpack-shell-plugin": "^0.5.0",

View File

@@ -1,12 +1,7 @@
<template>
<div class="about">
<div class="app">
<div class="app-header">
<div class="header-logo"><img width="60" height="60" src="../../../assets/img/logo1-2.png"></div>
<div class="header-title">
<div class="app-name">{{version.nezha.name}}</div>
<div class="app-version"><span class="about-label">{{$t("overall.version")}}&nbsp;&nbsp;&nbsp;</span><span>{{version.nezha.version}}</span></div>
</div>
</div>
<div class="app-component">
<div class="component-content">