目前為止我們都是手動地在index.html中引入所有資源，但是一應用開始漸漸變大，在檔名中使用哈西並輸出為多個bundle的時候，專案也會變得難以管理了。因此一些外掛程式就誕生了。
調整一下專案結構：
project
webpack-demo|-package.json
|-webpack.config.js
|- /dist
|- /src
|-index.js
+ |-print.js
|- /node_modules
src/print.js
export defaultfunction
printme()
src/index.js
import _ from 'lodash';+ import printme from './print.js';
function
component()
dist/index.html
-
在配置中加入src/print.js為新的入口，同時也要修改出口配置，以便動態產生輸出的包名：
webpack.config.js
const path = require('path');
module.exports =,
output:
};
跑起來：
...asset size chunks chunk names
print.bundle.js 2.74 kb 1[emitted] print
...
還是老規矩：
npm install --s**e-dev html-webpack-plugin
webpack.config.js
const path = require('path');
+ const htmlwebpackplugin = require('html-webpack-plugin');
module.exports =,
+plugins: [
+ new
htmlwebpackplugin()
+], output:
};
在構建之前你需要知道htmlwebpackplugin會產生自己的index.html，即使dist目錄下已經有了乙個，也就是它會替換之前的index.html，跑起來試試：
...asset size chunks chunk names
print.bundle.js 544 kb 0[emitted] [big] print
index.html 249bytes [emitted]
...
隨著專案變得越來越複雜dist資料夾也會變得越來越雜亂，webpack會把輸出檔案全放到dist目錄下但不會跟蹤這些檔案是否還被專案用到了。clean-webpack-plugin可以幫助解決這個問題：
npm install --s**e-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 =,
plugins: [
+ new cleanwebpackplugin(['dist']),
newhtmlwebpackplugin()
],output:
};
現在再跑一遍的話你應該只看得到本次構建產生的輸出檔案了。
通過manifest，webpack可以跟蹤到模組對映到輸出的過程，有時間的話可以研究下manifest，用webpackmanifestplugin可以把manifest資料輸出到json檔案中。
webpack學習之路之webpack核心概念
webpack相關文件 webpack官網 webpack中文官網 webpack github位址 webpack 版本差異及修復bug webpack 主要4個核心概念 1 entry entry是某一段 的入口，這段 入口會告訴webpack 裡面有哪些模組的依賴。entry也是打包的入口，告...
webpack學習之路（七）
本節我們將深入了解一些應用於構建 和應用的最佳實踐和工具。雖然我們對生產環境和開發環境做了略微區分，但是遵循不重複原則dry don t repeat yourself 還是保留乙個通用配置。為了整合這些配置我們需要乙個webpack merge外掛程式。有了通用配置我們就不用在特定環境的配置中重複...
webpack學習之路（五）
熱模組替換 hmr 是webpack提供的最有用的功能之一，它讓各種模組可以在執行時更新而無需重新整理，本篇主要注重於實現。ps hmr是為開發模式設計的，也只能用於開發模式。啟用hrm只需要更新webpack dev server的配置，然後使用webpack的內建外掛程式，同時要刪掉print....