Webpack 入門
Tip:
本文所有示例基於 webpack2。
文中的示例代碼說明可以參考:Webpack 示例代碼說明
安裝
本地安裝
$ npm install --save-dev webpack
$ npm install --save-dev webpack@<version>
如果你在項目中使用了 npm
,npm
首先會在本地模塊中尋找 webpack
。這是一個實用的小技巧。
"scripts": {
"start": "webpack --config mywebpack.config.js"
}
上面是 npm
的標准配置,也是我們推薦的實踐。
當你在本地安裝 webpack 后,你能夠從
node_modules/.bin/webpack
訪問它的 bin 版本。
全局安裝
$ npm install --global webpack
webpack
命令現在可以全局執行了。
創建一個 bundle 文件
創建一個 app/index.js
文件。
document.write('<h1>Hello World</h1>');
創建一個 index.html
文件。
<html>
<body>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
執行命令
$ webpack ./app/index.js ./dist/bundle.js
這條命令的第一個參數為輸入文件,第二個參數為輸出文件。
會在目錄下生成一個 dist/bundle.js
文件,它已打包所需的所有代碼的輸出文件。
在瀏覽器中打開 index.html
文件。
完整示例: (DEMO00)
webpack.config.js
webpack.config.js
為 webpack
默認的配置文件,當執行 webpack
命令時,webpack
會在當前目錄下自動搜索 webpack.config.js
文件。
單入口(Entry)
基於 (DEMO00) 的代碼,新建一個 webpack.config.js
文件,內容如下:
const path = require('path');
module.exports = {
// 這里應用程序開始執行
// webpack 開始打包
entry: "./app/index.js",
// webpack 如何輸出結果的相關選項
output: {
// 所有輸出文件的目標路徑
// 必須是絕對路徑(使用 Node.js 的 path 模塊)
path: path.resolve(__dirname, "dist"),
// 「入口分塊(entry chunk)」的文件名模板(出口分塊?)
filename: "bundle.js",
}
};
執行命令
$ webpack
在瀏覽器中打開 index.html
文件。
完整示例: (DEMO01)
多入口(Entry)
如果有多個入口文件怎么辦?很簡單,我們來看一個示例:
新建 app/about.js 文件
document.write('<h2>ABOUT</h2>');
新建 app/home.js 文件
document.write('<h1>HOME</h1>');
新建 index.html 文件
<html>
<body>
<script src="dist/home.js"></script>
<script src="dist/about.js"></script>
</body>
</html>
新建 webpack.config.js 文件
const path = require('path');
module.exports = {
// 這里應用程序開始執行
// webpack 開始打包
// 本例中 entry 為多入口
entry: {
home: './app/home.js',
about: './app/about.js'
},
// webpack 如何輸出結果的相關選項
output: {
// 所有輸出文件的目標路徑
// 必須是絕對路徑(使用 Node.js 的 path 模塊)
path: path.resolve(__dirname, "dist"),
// 「入口分塊(entry chunk)」的文件名模板(出口分塊?)
// filename: "bundle.js", // 用於多個入口點(entry point)(出口點?)
filename: "[name].js", // 用於多個入口點(entry point)(出口點?)
// filename: "[chunkhash].js", // 用於長效緩存
// filename: "[name].[chunkhash].js", // 用於長效緩存
}
};
執行命令
$ webpack
在瀏覽器中打開 index.html
文件。
完整示例: (DEMO02)
Webpack 系列教程
歡迎閱讀其它內容: