webpack4---jsbabel解析问题及uglify插件

目录

webpack配置踩坑

1.在webpack4配置过程中 使用 “uglifyjs-webpack-plugin”插件失败

3.关于js解析babel的配置问题

---

webpack4出了已经有一段时间了，我本来是在webpack中文文档学习，后来发现国内的中文文档 指南中有很多坑，与英文文档比对后，发现中文文档其实还没有更新到目前最新的版本，有很多地方都是根据老版本的webpack进行配置的，因此在大家在官网学习的时候，还是建议大家看英文的文档，可能也会有点坑，但是绝对比中文的少得多而且用的新的多。

本文中当前webpack版本为 4.29.0

项目目录如下：

---

1.在webpack4配置过程中 使用 “uglifyjs-webpack-plugin”插件失败 

失败提示：

ERROR in app.bundle.js from UglifyJs
Unexpected token: name (element) [app.bundle.js:115,8]

错误原因：

项目中使用了es6语法，uglifyJS解析es6语法过程中，遇到有的es6包不识别

本身对于webpack4来说，“uglifyjs-webpack-plugin”插件是不推荐使用的，在配置时使用mode:production 将模式设置为生产环境，内部会有一个自动的打包将代码进行压缩，英文文档原文“webpack v4+ will minify your code by default in production mode.”告诉我们在生产环境模式可以默认压缩代码，并且除了默认外官网还推荐我们使用：

• BabelMinifyWebpackPlugin
• ClosureCompilerPlugin

---

2.webpack4 关于js解析babel的配置问题

项目中的规则配置：

   //webpack.common.js 文件
   module:{
        rules:[
            {
                // js 文件才使用 babel
                test: /\.js$/,
                // 使用哪个 loader
                use: 'babel-loader',
                // 不包括路径
                exclude: /node_modules/
            }
        ]
    },

 当前的babel版本：

// package.json 文件
"devDependencies":{
    .....
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    ......
}
//执行命令代码
"start": "webpack-dev-server --open --config webpack.dev.js",

失败提示： 

//1.可能出现另一个错误信息，就是在控制台提示你当前使用的babel-loader版本使8.x 需要升级babel-core 7.x 你可能使用了低于版本7的babel-core文件

2.ERROR in ./src/index.js

Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: Cannot read property 'bindings' of null 

 错误原因：

以上两个错误的产生原因都是由于当前项目中使用的babel版本过低；

错误1：在npm下载包的时候，使用的是语句"npm i --save-dev babel-loader babel-core babel-preset-env" ，按道理来讲的确使下载到新版了，但是问题在于babel7版本后进行了大变动，原来的"npm install babel-core" 改成了"npm install --save-dev @babel/core",对此官网给出的解释是 ----"这是 babel 7 的一大调整，原来的 babel-xx 包统一迁移到babel 域下 - 域由 @ 符号来标识，一来便于区别官方与非官方的包，二来避免可能的包命名冲突"。

错误2：由错误1原因，错误2也得到解决，当我们项目中引用的babel-loader@8.x版本8+时，项目中就需要使用 @babel/core@^7.x ，并且用@babel/preset-env@7取代babel-preset-env@^1.7.0 。

解决方法：

把项目中原来的的老版本的  "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1",去掉，在输入台（我使用的编译器是webstorm） 在terminal 输入命令："npm install --save-dev @babel/core @babel/cli @babel/preset-env" ,并在.babelrc 文件中更新当前presets配置。

// package.json 文件
"devDependencies":{
    .....
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    ......
}
//执行命令代码
"start": "webpack-dev-server --open --config webpack.dev.js",
//.babelrc配置
  "babel": {
    "presets": [
      "@babel/preset-env"
    ],
    "plugins": []
  },