簡介
webpack是以模塊依賴和生成靜態資產代表這些模塊。通俗一點理解就是，把所有依賴的腳本，樣式，統一打包，減少前端請求，並且可壓縮，可混淆
優勢
- 支持ES6
- 支持AMD/CMD
- 插件豐富
- 並壓/混淆，模塊依賴
- 減少網絡請求，加快前端渲染
- 利於模塊化開發
劣勢
- 需要了解node.js
- 存在學習成本
- 不利於入門學習
- debug困難
類似框架
- grunt
- gulp
- bower
- karma
入門例子
- 依賴node.js
- 依賴webpack模塊
安裝依賴
node.js 安裝
下載後執行
node -v運行成功則安裝成功
webpack 模塊依賴
npm install webpack -g-g代表全局安裝
項目下使用webpack
所有命令在項目根目錄執行
初始化
npm init執行該命令，會要求輸入一些，如項目項目名，項目描述，作者，等信息，執行完後會出現一個package.json的文件在項目的根目錄
項目加入依賴
webpack
npm install webpack --save-dev改命令執行後會修改package.json，在devDependencies下加入了webpack
當然也可以通過@來指定其他版本如
npm install webpack@1.2.x --save-devcss-loader style-loader
讓項目支持css壓縮和樣式加載器
npm install css-loader style-loader目錄結構
入口文件（index.html）
bundle.js 是壓縮之後的文件，是webpack自動生成，下面會說
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="../scripts/bundle.js" charset="utf-8"></script>
</body>
</html>業務腳本（content.js）
module.exports = "It works from content.js!";樣式腳本（style.css）
body {
background: yellow;
}入口腳本（entry.js）
require("../css/style.css");
document.write(require("./content.js"));webpack配置（webpack.config.js）
module.exports = {
//入口腳本
entry: "./src/modules/main/scripts/entry.js",
//輸出
output: {
//輸出目錄
path: './src/modules/main/scripts',
//輸出腳本
filename: "bundle.js"
},
module: {
//壓縮器
loaders: [
//css後綴的，採用style!css壓縮器
{ test: /\.css$/, loader: "style!css" }
]
}
};執行命令
webpack
結果
直接訪問index.html
存在問題
- 每次需要執行命令打包繁瑣
- 腳本多個時還不能加入依賴
- 目錄結構配置困難
- 打包後文件名過於死板
該上面的問題會得到解決，在後面的博文進行寫出