webpack學習之路（三）
輸出管理：
目前為止我們都是手動地在index.html中引入所有資源，但是一應用開始漸漸變大，在檔名中使用哈西並輸出為多個bundle的時候，專案也會變得難以管理了。因此一些外掛就誕生了。
準備：
調整一下專案結構：
project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- print.js
|- /node_modulessrc/print.js
export default function printMe() { console.log('I get called from print.js!'); } src/index.js
import _ from 'lodash';
+ import printMe from './print.js';
function component() {
var element = document.createElement('div');
+ var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ btn.innerHTML = 'Click me and check the console!';
+ btn.onclick = printMe; + + element.appendChild(btn); return element; } document.body.appendChild(component()); dist/index.html
<!doctype html>
<html>
<head>
- <title>Asset Management</title>
+ <title>Output Management</title>
+ <script src="./print.bundle.js"></script>
</head>
<body>
- <script src="./bundle.js"></script> + <script src="./app.bundle.js"></script> </body> </html> 在配置中加入src/print.js為新的入口，同時也要修改出口配置，以便動態產生輸出的包名：
webpack.config.js
const path = require('path');
module.exports = {
- entry: './src/index.js',
+ entry: {
+ app: './src/index.js',
+ print: './src/print.js' + }, output: { - filename: 'bundle.js', + filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };跑起來：
...
Asset Size Chunks Chunk Names
app.bundle.js 545 kB 0, 1 [emitted] [big] app print.bundle.js 2.74 kB 1 [emitted] print ...現在也確實生成了print.bundle.js和app.bundle.js檔案，和在index.html中引入的名字一樣。但是如果我們改了某個入口的名字，或者加了一個入口的話，我們重新構建後的出口檔案的名字和數量就會改變，index.html中的引入是不會自動變化的，但是HtmlWebpackPlugin這個外掛可以幫我們幹這件事。
設定HtmlWebpackPlugin:
還是老規矩：
npm install --save-dev html-webpack-plugin
webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management' + }) + ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };在構建之前你需要知道HtmlWebpackPlugin會產生自己的index.html，即使dist目錄下已經有了一個，也就是它會替換之前的index.html，跑起來試試：
...
Asset Size Chunks Chunk Names
print.bundle.js 544 kB 0 [emitted] [big] print app.bundle.js 2.81 kB 1 [emitted] app index.html 249 bytes [emitted] ...現在開啟dist檔案下的index.html檔案會發現已經是外掛幫你加好了入口的檔案了。當然有時間可以看看html-webpack-plugin和html-webpack-template瞭解更多的知識。
清理/dist資料夾：
隨著專案變得越來越複雜dist資料夾也會變得越來越雜亂，webpack會把輸出檔案全放到dist目錄下但不會跟蹤這些檔案是否還被專案用到了。clean-webpack-plugin可以幫助解決這個問題：
npm install --save-dev clean-webpack-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
+ new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
現在再跑一遍的話你應該只看得到本次構建產生的輸出檔案了。
Manifest:
通過manifest，webpack可以跟蹤到模組對映到輸出的過程，有時間的話可以研究下manifest，用WebpackManifestPlugin可以把manifest資料輸出到json檔案中。