美文网首页
webpack3迁移到webpack4

webpack3迁移到webpack4

作者: 安普瑞斯 | 来源:发表于2021-05-25 08:32 被阅读0次

    一、升级npm run dev

    步骤

    1、安装webpack webpack-cli

    npm i -D webpack@^4.8.3 webpack-cli
    

    参考

    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版本保持一致
    参考:

      npm install --global --production windows-build-tools
      npm install --global node-gyp
    

    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/,会自动打开
    分析规则

    报错

    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

    相关文章

      网友评论

          本文标题:webpack3迁移到webpack4

          本文链接:https://www.haomeiwen.com/subject/jvzaohtx.html