無痛轉移 Webpack v1 到 v2

Webpack 已經是各大前端技術的一個基本配備,也是當前最夯的一套打包 JavaScript 的工具,幾個月前 v2 的版本正式 release,這次我們就要來研究從 v1 轉移到 v2 是如何進行的!

Webpack logo

結論

轉移 Webpack v2 需要改動的設定不多,而且 Webpack-devServer 的部分設定基本上完全不用改!就能夠讓 Webpack 有更多的功能,更彈性的設定,與更好的 bundle 體驗,何不試試看呢?

Webpack 簡介

Webpack 是一套模組化打包 JavaScript 的工具,能夠透過使用不同的設定、或是不同的套件,讓 Webpack 打包 JavaScript 的時候有更多的能力,甚至增加開發的速度與效率!

$ npm install webpack

以下為幾套我自己常用的功能

Loader

  • babel-loader
需搭配安裝 babel-loader 套件,甚至依照你的需求增加安裝 babel-preset 套件,來幫你轉譯 JavaSctipt 中 ES6 + 的語法!( 適應所有瀏覽器!)
  • sass-loader
  • css-loader
  • style-loader
這三套通常會一起搭配,幫你把 sass 檔案處理過,寫進 JavaScript 中!

Plugins

  • definePlugin
用來定義 development 或是 production 需要的版本,也可以利用這個 Plugin 來定義不同的 API url 或是設定!
  • hotModuleReplacementPlugin
開發使用,在開發時搭配 devServer 使用,自動偵測有用到的 JavaScript 檔案改動,重新 build bundle,讓畫面刷新為改過的結果!
  • uglifyJsPlugin

production 版本使用,幫你把 JavaScript 的 source code 醜化並壓縮,把 bundle 過的檔案 size 更小,也更難被別人看出你的 source code 怎麼寫的!

Webpack-devServer

利用 webpack-devServer 幫你再開發的時候在 localhost 起一個 local server!幫助你在本機電腦上的開發!

$ npm install webpack-dev-server
如果你在開發 React,甚至可以搭配 React-hot-loader 達到更好的開發體驗!

轉移到 Webpack v2

config 設定檔

  • module.loaders 改為 module.rules【這是跟其他比起來最有差別的改變】
module: {
loaders: [
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true
}
}
]
},
{
test: /\.jsx$/,
loader: "babel-loader", // Do not use "use" here
exclude: [/node_modules/]
}
]
]
}
要注意的是,babel-loader 不要用 use 的 api,其他 css 相關的 loader 才使用 use 的 api
  • 鏈式 loader 取消
// v1 config
module: {
loaders: [{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}]
}
// v2 config
module: {
rules: [{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
}]
}
  • 取消自動 loader 後綴字
  • 取消 json-loader

另外 Plugin 也有多了一些選項

UglifyJsPlugin

  • sourceMap 預設為 false,可手動改為 true
  • compress.warnings 預設為 false,可手動改為 true
devtool: "source-map",
plugins: [
new UglifyJsPlugin({
sourceMap:true,
compress: {
warnings: true
}
})
]
  • 取消 minimize: true 的選項,需改用 LoaderOptionPlugin
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true
})
]

其餘更多設定請看:webpack official doc — migrating

結語

其實這次我只剛好一時興起想試試看前陣子 release 的 Webpack v2,結果一玩發現設定幾乎沒什麼變,根本就是無痛轉移,有興趣的人不仿也來嘗試看看!

附上我的 source code:webpack2-startedkit
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.