Webpack V2 升級初體驗

Webpack 終於發佈了 2.2 版本了，官網也更新了最新的文檔。

特性

先過一下 V2 版本新增的一些特性。

• Tree Shaking，能夠忽略未使用過的 export方法（這個 V1 的時候就已經經過三方插件實現了，如 babel-plugin-import）

• ES6 modules，支持原生的 ES6 的模塊加載器（和 babel-preset-es2015 一塊兒使用時注意關閉其 modules 配置）

• 支持 ES6 做代碼拆分，並返回 Promise 對象

• 支持異步 js 請求

• 其它

安裝

npm install webpack

目前安裝默認會使用 2.2+版本了。

配置

這邊僅列舉項目中常見配置的一些變動，更具體的信息請翻閱官方文檔。

一、 resolve.root, resolve.fallback, resolve.modulesDirectories 配置項被 resolve.modules所替代。

resolve: {
-   root: path.join(__dirname, "src")
+   modules: [
+     path.join(__dirname, "src"),
+     "node_modules"
+   ]
  }

二、 resolve.extensions 配置項再也不須要傳一個空字符串了。

三、 module.loaders 改爲了 module.rules，雖然 module.loaders 語法依舊保留，可是不建議使用。

module: {
-   loaders: [
+   rules: [
      {
        test: /\.css$/,
-       loaders: [
+       use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
-           query: {
+           options: {
              modules: true
            }
          }
        ]
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader", // Do not use "use" here
        options: {
          // ...
        }
      }
    ]
  }

四、 loaders 中由原先! 拼接字符串的寫法改成 loader.use 數組。
五、 全部 loader 模塊必須帶上 -loader 後綴，不能省略。
六、 loader 的參數配置只能寫在 rule.options 內部不能寫在外面。
七、 ExtractTextWebpackPlugin 改變
ExtractTextPlugin 1.0.0 不能在 webpack v2 下工做。 你須要明確地安裝 ExtractTextPlugin v2。

npm install --save-dev extract-text-webpack-plugin@beta

這一插件的配置變化主要體如今語法上。

ExtractTextPlugin.extract

module: {
  rules: [
    test: /.css$/,
-    loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })
+    loader: ExtractTextPlugin.extract({
+      fallbackLoader: "style-loader",
+      loader: "css-loader",
+      publicPath: "/dist"
+    })
  ]
}

new ExtractTextPlugin({options})

plugins: [
-  new ExtractTextPlugin("bundle.css", { allChunks: true, disable: false })
+  new ExtractTextPlugin({
+    filename: "bundle.css",
+    disable: false,
+    allChunks: true
+  })
]

其它檢查項

• loader 默認的 resolve 配置是相對於 context 的，能夠不用再使用相似 path.resolve() 的方法來指定目錄了

• 取消了 module.preLoaders 以及 module.postLoaders

• 更改 UglifyJsPlugin 的 sourceMap 的默認配置爲 false

• 更改 UglifyJsPlugin 的 compress.warnings 的默認配置爲 false

• UglifyJsPlugin 再也不壓縮 loaders，須要經過設置 minimize:true。後續版本會逐漸移除

plugins: [
+   new webpack.LoaderOptionsPlugin({
+     minimize: true
+   })
  ]

代碼中變動

• ES2015 的代碼分割
  使用 import() 替代 require.ensure 做爲方法來懶加載 chunks 到你的應用中，並返回一個 Promise 對象。這意味着，若是模塊加載失敗的話，也能夠作容錯處理。

目前因爲這個建議還在 Stage 3，若是你想要同時使用 import 和 Babel，你須要安裝/添加 dynamic-import 語法插件來繞過解析錯誤。

• 支持字符串模板和 Promise。

結尾

體驗下來，版本升級，總體配置文件的改動成本還算小的。若是碰到第三方 loader 對 V2 版本支持不友好的話就要費點腦筋了。可能因爲我試驗項目中文件內容很少，對於編譯速度和打包後的文件大小差異不太明顯。

參考文章

• Migrating from v1 to v2

UPDATE

Webpack3 基本上也能夠無痛升級，比較大的改動點以下：

• 做用域提高

• 魔法註釋

參考文章： https://medium.com/webpack/we...