前言
之前寫過這篇 webpack,單一設定 webpack 的方式,一般來說為了減少 request,所以會希望將 js 檔案 compile 成一個,這種條件你不是從頭到尾打造這個網站的作者,了解每個頁面 dom 布局的話是相當困難的,而且從 HTTP/2 的新標準出現以後,這招已經沒有明顯的優勢了,可以參考 「你的網站升級到 HTTP/2 了嗎?」這篇文章。
所以這篇文章會重新教學怎麼設定,讓你每個網頁有屬於自己的 js 檔案,但共用的套件如 jQuery 或 bootstrap 卻可以獨立,減少獨立檔案的大小。
安裝相關套件
npm i --save-dev webpack babel-core babel-loader babel-preset-es2015 npm i --save jquery bootstrap
目前主要還是用 babel 編譯較新穎的 JavaScript 語法。
檔案布局
webpack.config.js
const webpack = require('webpack'); const path = require('path'); module.exports = { entry: { a: path.resolve(__dirname, 'js/src/a'), b: path.resolve(__dirname, 'js/src/b'), vendor: ['jquery', 'bootstrap'] }, output: { path: path.resolve(__dirname, 'js/build/'), filename: '[name].js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ], module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] } };
這個設定檔預計要將 js/src/
下的 a.js
以及 b.js
compile 到 js/build/
,並將 jQuery 以及 bootstrap 抽出來成為 vendor,設定完成後,在根目錄執行 webpack,編譯後在 js/build/
下會看到 a.js
, b.js
, vendor.bundle.js
三個檔案。
.babelrc
{ "presets": ["es2015"] }
這是 babel 的設定檔。
js/src/a.js
$(function() { $('body').append('this is a'); });
js/src/b.js
$(function() { $('body').append('this is a'); }); js/src/b.js $(function() { $('body').append('this is b'); });
a.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack page a</title> <script src="js/build/vendor.bundle.js"></script> <script src="js/build/a.js"></script> </head> <body> <h3>this is a</h3> </body> </html>
b.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack page b</title> <script src="js/build/vendor.bundle.js"></script> <script src="js/build/b.js"></script> </head> <body> <h3>this is b</h3> </body> </html>
執行 a.html
以及 b.html
就會看到各自的效果了。