构建vue项目常见错误集锦 ---LTS

本文是基于webpack 4.0以上的配置哟~~

mode报错

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

# 问题原因
由于webpack在打包的时候需要区分环境，所以需要一个模式来标识。这个表示一般系统在未配置的时候会发出警告并设置默认值为development。

# 解决方案
方案一：在package.json里面的scripts字段添加里面 --mode=development
"build": "webpack --mode=development"

方案二：在webpack.config.js里面添加一个mode字段
module.exports = {
   
	mode: 'development',
	entry: '***',
	output: {
   
		filename: '****'
	}
}

babel 报错

- Maybe you meant to use
"plugins": [
  ["@babel/plugin-transform-runtime", {
   
  "corejs": 3
}]
]

# 问题原因
错误将corejs:3归纳为plugins的子项目，其实应该是和@babel/plugin-transform-runtime同级

# Tips
使用babel的时候会用到一大堆依赖
@babel/core
@babel/plugin-transform-runtime
@babel/preset-env
@babel/runtime
@babel/runtime-corejs3

# babel完整配置
  module: {
   
        rules: [
            {
   
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
   
                    loader: "babel-loader",
                    options: {
   
                        "presets": ["@babel/preset-env"],
                        "plugins": [
                            ["@babel/plugin-transform-runtime", {
   
                                "corejs": 3
                            }]
                        ]
                    }
                }
            }]
    }

# 推荐版本
在webpack.config.js里面写
 module: {
   
        rules: [
            {
   
                test: /\.js$/,
                use: {
   
                    loader: "babel-loader"
                },
                 exclude: /node_modules/
            }]
    }
然后新建一个.babelrc目录负责维护babel的配置
{
   
    "presets": ["@babel/preset-env"],
        "plugins": [
            ["@babel/plugin-transform-runtime", {
   
                "corejs": 3
            }]