將 JavaScript 模組化打包減少 http request 是目前幾乎必備的技能，之前使用 requirejs 來做這一塊，後來玩了一下 webpack 後發現回不去了，以此篇做個設定與使用筆記。
webpack.config.js
var webpack = require('webpack');
var sourcePath = __dirname + '/assets/js/src';
module.exports = {
entry: sourcePath + '/entry.js',
output: {
path: __dirname + '/assets/js/build',
filename: 'bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
],
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: "babel", query: {presets: ['es2015']}}
],
},
resolve: {
alias: {
init: __dirname + '/assets/js/app/init.js'
}
}
};
web.config.js 是 webpack 的設定檔，將常用的東西規範好之後，執行 webpack 這個指令他便會照你的設定檔作動，entry 指的是來源檔案，如果是多個檔案要 compiler 的話可以使用物件寫法：
entry: {
'a': sourcePath + '/a.js',
'b': sourcePath + '/b.js'
},
output: {
path: __dirname + '/assets/js/build',
filename: '[name].js'
},
這樣的格式他便會照你的 key name gen 一個一模一樣的檔案在 output 資料夾，plugin 的部分我用 npm 安裝了 jQuery，並用 plugin 宣告讓他可以全域使用，不用每次都 require，壓縮的部分使用 UglifyJS 2，基本上如果不使用 plugin 的話在 command line 下 webpack --optimize-minimize 會有一樣的效果，記得如果有下壓縮編譯的話速度會慢一些，開發階段可以先關起來，module 的部分使用了 babel-loader，撰寫的程式碼都會經過 babel 的編譯，確定你的 ES6 語法可以跨瀏覽器使用，alias 的部分就是讓你少打字而已，另外如果在 command line 使用 webpack -w 便會執行監看模式，如果 entry 的檔案有所變動的話就會 auto compiler，但我喜歡自己下指令，因為我還是會稍微看一下編譯結果，接下來開一個 webpack 的資料夾，來安裝相關的模組。
npm init npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev npm i uglify-js --save-dev npm i jquery@1.12 --save
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack test</title>
<script src="assets/js/build/bundle.js"></script>
</head>
<body>
</body>
</html>
assets/js/app/init.js
module.exports = {
hello: (name = 'Chan') => {
return `Hello world, I am ${name}`;
}
};
assets/js/src/entry.js
var init = require('init');
$(function() {
console.log(init.hello());
});
在 command line 執行 webpack，開啟網頁就會得到，Hello world, I am Chan，我的 VIM 有使用 JSHint 檢查原始碼，他偵測到 ES6 會報錯，只要在根目錄放置設定檔即可。
.jshintrc
{
"esnext": true
}
沒有留言:
張貼留言