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也得到解決，當我們項目中引用的[email protected]版本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": []
  },