一、升级npm run dev
步骤
1、安装webpack webpack-cli
npm i -D webpack@^4.8.3 webpack-cli
参考
- https://www.cnblogs.com/zhensg123/p/11412679.html
- https://www.jianshu.com/p/feb3156316c1
-
https://segmentfault.com/a/1190000015237322
2、升级webpack-dev-server
npm i -D webpack-dev-server@^3.1.4
3、升级vue-loader
npm i -D vue-loader@^15.0.0
4、升级html-webpack-plugin
npm i -D html-webpack-plugin@next
修改配置
chunksSortMode: 'auto'
5、升级url-loader和file-loader
删除package.json文件中的url-loader和file-loader
npm i -D url-loader file-loader
6、删除webpack-dashboard
7、更新babel
npm i -D babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/polyfill
npm i --save @babel/runtime @babel/runtime-corejs2
删除原有的babel-core、 babel-plugin-transform-runtime、babel-preset-stage-2
修改.babelrc文件
{
"presets": [
["@babel/preset-env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"plugins":[
"transform-vue-jsx",
[
"@babel/plugin-transform-runtime",
{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
报错
1、compilation.mainTemplate.applyPluginsWaterfall is not a function
或者DeprecationWarning: Tapable.plugin is deprecated. Use new API on.hooksinstead这个错
安装html-webpack-plugin@next
2、Cannot read property 'fileLoader' of undefined
升级url-loader和file-loader到最新版本，webpack4不兼容低版本的file-loader
3、This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler.
解决方案：
vue与vue-template-compiler版本保持一致
参考：
- https://blog.csdn.net/tangkthh/article/details/103717166
-
https://blog.51cto.com/ji123/2065548
4、node-gyp rebuild - 方案一：拷贝可以用的项目的node-gyp文件夹，替换node_moudle文件下的node-gyp
- 方案二：
npm install --global --production windows-build-tools
npm install --global node-gyp
- 方案三：安装visual studio 2017
网址：https://docs.microsoft.com/zh-cn/visualstudio/productinfo/vs2017-system-requirements-vs
including the "Desktop development with C++" workload.
注意安装时勾选 包含c++的桌面开发选项就行安装
npm config set msvs_version 2017
5、Unknown word
style-loader: Adds some css to the DOM by adding a <style> tag
https://www.cnblogs.com/tgxh/p/6729271.html
{
test: /\.css$/,
use: ['vue-style-loader', 'style-loader', 'css-loader']
},
6、Uncaught ReferenceError: development is not defined vue
https://blog.csdn.net/kingov/article/details/82925539
二、升级npm run build
步骤
1、CommonsChunkPlugin已废弃
替换：https://blog.csdn.net/github_36487770/article/details/80228147
2、extract-text-webpack-plugin已废弃，可以用mini-css-extract-plugin替代
npm i -D mini-css-extract-plugin
配置
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].css?v=[contenthash:4]'),
chunkFilename: utils.assetsPath('css/[id].css?v=[contenthash:4]')
})
3、webpack 4 已经废除了 之前 UglifyJsPlugin，用 optimization.minimize 替代
UglifyJsPlugin官网
https://www.npmjs.com/package/uglifyjs-webpack-plugin
用terser-webpack-plugin替换掉uglifyjs-webpack-plugin
https://blog.csdn.net/LLL_liuhui/article/details/103887900
4、prod开启gzip，使用compression-webpack-plugin插件
注意，目前最新版需要运行在webpack4.0以上，如果你的webpack是3.x版本的，请安装compression-webpack-plugin的1.x版本(笔者安装的是1.1.12)。
https://www.cnblogs.com/nianzhilian/p/10229344.html
productionGzip: true,
productionGzipExtensions: ['js', 'css']
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + config.build.productionGzipExtensions.join('|') + ')(.*)$'),
threshold: 10240,
minRatio: 0.8
})
)
}
查看页面是否开启gzip
看response headers里面的content-encoding参数值是否是gzip
5、用webpack-bundle-analyzer分析打包代码
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
运行
npm run build --report
访问http://127.0.0.1:8888/，会自动打开
分析规则
- 有哪些依赖被重复打包了
- 哪些是只用了一小部分，却打包了整个
- 哪个包太大了，考虑拆分
webpack4.splitChunks
https://www.cnblogs.com/kwzm/p/10314438.html
报错
1、configuration.optimization.splitChunks.cacheGroups['vendor'].minChunks should be a number
CommonsChunkPlugin中的minChunks可以设置为数字、函数和Infinity，默认值是2，并不是官方文档说的入口文件的数量，下面解释下minChunks含义：
- 数字：模块被多少个chunk公共引用才被抽取出来成为commons chunk
- 函数：接受 (module, count) 两个参数，返回一个布尔值，你可以在函数内进行你规定好的逻辑来决定某个模块是否提取成为commons chunk
- Infinity：只有当入口文件（entry chunks） >= 3 才生效，用来在第三方库中分离自定义的公共模块
参考： https://segmentfault.com/a/1190000012828879?utm_source=tag-newest
原来的代码
minChunks(module) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
改造后
vendor: {
name: 'vendor',
test: /[\/]node_modules[\/]/,
chunks: 'initial' // 只打包初始时依赖的第三方
}
2、configuration.optimization.splitChunks.cacheGroups['app'] has an unknown property 'async'
configuration.optimization.splitChunks.cacheGroups['app'] has an unknown property 'children'
删除'async'和 'children'属性
3、You may need an additional loader to handle the result of these loaders
https://www.jianshu.com/p/c7597344fec6
https://segmentfault.com/q/1010000014842097
4、Couldn't find preset "@babel/env" relative to directory
参考：
5、DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
出现这个问题的原因是存在已经不维护的组件，常见于extract-text-webpack-plugin组件
解决方法：
这是由于extract-text-webpack-plugin没有提供支持webpack4以上的版本
可以通过安装下一代版本解决
npm i -D extract-text-webpack-plugin@next
6、UnhandledPromiseRejectionWarning: Error: "dependency" is not a valid chunk sort mode
https://www.cnblogs.com/thymeleaf/p/10248708.html
7、打包后的图片路径中出现这种情况[object%20Module]
https://msd.misuland.com/pd/4146263639743012728
esModule: false
8、本地起node server服务出现404，如果想从根目录访问，设置
app.use(express.static(__dirname))
本地起服务
https://blog.csdn.net/yufengaotian/article/details/86646318
后端服务代理
https://www.npmjs.com/package/express-http-proxy
开启gzip
https://blog.csdn.net/fengyjch/article/details/80859949
const express = require("express")
const compression = require('compression')
const app = express()
const proxy = require('express-http-proxy')
app.use(compression())
app.use('/portal', express.static("www"))
app.use('/', proxy('http://udmssit2.cnsuning.com'))
app.listen(80,()=>{
console.log("服务开启在80端口")
})
访问路径时，访问域名fedsit2.cnsuning.com/portal
