babel6升级babel7，webpack3升级webpack4

1. babel升级

（1）卸载babel-core，重新安装@babel/core

npm uninstall babel-core
npm i -D @babel/core // 重新安装babel7的core
npm i -D babel-loader@8.1.0 // babel7需要babel-loader8以上的版本，否则报错
npm i -D @babel/polyfill
npm i -D @babel/runtime
npm i -D @babel/plugin-transform-runtime
npm i -D @babel/preset-env
1
2
3
4
5
6
7

（2）删除stage，presets 废弃 stage-0、stage-1、stage-2、stage-3，使用 @babel/preset-env 代替所有预设配置项，包含基础的es5代码的转换规则插件

npm uninstall babel-preset-env
npm i @babel/preset-env

npm uninstall babel-preset-stage-2 
1
2
3
4

删除所有babel-plugin-*，换成@babel/plugin-*，其他的功能以插件的形式引入，如@babel/plugin-proposal-decorators试试
（3）配置.babelrc.js

// .babelrc.js
{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      "corejs": "2",
      "useBuiltIns": "usage"
    }]
  ],
  "plugins": [
    "transform-vue-jsx",
    "@babel/plugin-transform-runtime",
    ["component",
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

(4) 删掉 babel-polyfill

npm uninstall babel-polyfill
并删除项目中所有引入的import 'babel-polyfill'
我的项目中发现的有：
webpack的配置项中entry中删除：'babel-polyfill'
main.js中删除import 'babel-polyfill'

启动项目试试，再根据报错做相应修改。

webpack3升4

（1）基础版本更新

npm i webpack@4.28.3 webpack-dev-server@3.1.14 webpack-cli@3.2.1
npm i vue-loader@15.10.0 eslint-loader@4.0.2 html-webpack-plugin@3.2.0
npm i mini-css-extract-plugin@2.6.1
1
2
3

（2）webpack.dev.conf.js调整

 ...
  // 开发环境引入
  mode: 'development',
  ...
  module: {
    ...
  }
  devServer: {
    ...
  }
1
2
3
4
5
6
7
8
9
10

引入vue-loader

...
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
module.export = {
  ...
  plugins: [
    ...
    // 引入vue-loader插件
    new VueLoaderPlugin(),
    ...
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12

接着, 以下插件被废弃掉了，直接注释掉

• webpack.DefinePlugin
• webpack.NamedModulesPlugin
• webpack.NoEmitOnErrorsPlugin

（3）webpack.prod.conf.js调整

同开发环境,需要引入mode和vue-loader，一模一样。然后在配置表里添加optimization选项：

...
output: { ...},
// 这里添加
optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: config.build.productionSourceMap,
        uglifyOptions: {
          warnings: false
        }
      }),
      new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    ],
    splitChunks:{
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /node_modules\/(.*)\.js/
        },
        styles: {
          name: 'styles',
          test: /\.(scss|css)$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  },
  plugins: [...]  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

引入mini-css-extract-plugin插件，并添加到插件里：

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: [
  ...
  new MiniCssExtractPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css')
  }),
  ...  
]
1
2
3
4
5
6
7
8
9
10

注释掉废弃的插件：

• webpack.DefinePlugin
• UglifyJsPlugin (放到optimization里了)
• ExtractTextPlugin
• OptimizeCSSPlugin (放到optimization里了)
• CommonsChunkPlugin (所有的…，变成使用optimization。splitChunks了)

（4）utils.js 调整
这里主要是需要添加mini-css-extract-plugin插件

...
// 注释掉原来的插件
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
// 找到:
// return ExtractTextPlugin.extract({
//   use: loaders,
//   fallback: "vue-style-loader",
//   publicPath: '../../'
// });
// 改为:
return [MiniCssExtractPlugin.loader].concat(loaders)
1
2
3
4
5
6
7
8
9
10
11
12
13

（5）解决各个组件库不适配问题
由于项目是老项目，前人使用了组件库mui/mint-ui/vux/vant以及jQuery。
a.首先解决vux的问题，vux的vux-loader针对webpack4的升级推出了@vux/loader，用法和原来类似，所以只替换引入就行

npm uninstall vux-loader
npm install @vux/loader --save

//const vuxLoader = require('vux-loader')
const vuxLoader = require('@vux/loader')
1
2
3
4
5

b. 因为mui.js里面有不严格模式，用而webpack打包默认使用严格模式，所以需要取消webpack的严格模式（毕竟把第三方组件改成严格模式更麻烦）

npm install -D @babel/plugin-transform-modules-commonjs @babel/plugin-transform-strict-mode
1

babel中添加 ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]

"plugins": [
    "transform-vue-jsx",
    "@babel/plugin-transform-runtime",
    ["@babel/plugin-transform-modules-commonjs", { "strictMode": false 		  }],
]
1
2
3
4
5

c. mint-ui在项目启动过程中没有报错，但在浏览器控制台一直出现：_loadmore is not defined类似报错，因为项目中在main.js中通过按需引入了loadmore组件。

// Vue.component(Loadmore.name, Loadmore)
Vue.use(Loadmore)
1
2

通过Vue.use替换Vue.component方式解决了这个问题。
在组件中import { MessageBox } from 'mint-ui'还是会报错MessageBox is not defined，只能放弃按需引入改成全部引入，后来觉得全部引入代价太大，只能将MessageBox统一换成了vant的Dialog

d. jquery的引入也报错了"export 'default' (imported as '$') was not found in '../../../static/js/jquery.min.js

// import $ from '../../../static/js/jquery.min.js'
import * as $ from '../../../static/js/jquery.min.js'
1
2

e. swiper打包完报错：new Swiper.default is not constructor
修改swiper引入

// import Swiper from 'swiper'
import Swiper from 'swiper/dist/js/swiper'
1
2