1.安裝
webpack依賴nodeJS環(huán)境，所以安裝webpack之前先確保本機(jī)已安裝nodeJS，執(zhí)行以下命令在全局下安裝webpack：
sudo npm install -g webpack
2.在項(xiàng)目目錄安裝依賴
- 在項(xiàng)目目錄執(zhí)行以下命令生成package.json
npm init
- 執(zhí)行以下命令在項(xiàng)目目錄中安裝依賴
npm install webpack --save-dev
- 執(zhí)行以下命令在項(xiàng)目目錄中安裝webpack開發(fā)工具（如果不需要可以省略）
npm install webpack-dev-server --save-dev
3.使用
- 新建一個(gè)index.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
- 新建一個(gè)js的入口文件entry.js
document.write("it works");
- 使用webpack將entry.js編譯至引用的bundle.js,編譯完成之后在瀏覽器中打開index.html會(huì)顯示 it works
webpack entry.js bundle.js
4.為項(xiàng)目添加模塊
- 新建一個(gè)文件module.js
module.exports=document.write(" it works from module.js")
- 更改js入口文件entry.js
document.write("it works");
document.write(require("./module.js"))
- 重新編譯entry.js至bundle.js
- 刷新index.html發(fā)現(xiàn)內(nèi)容變成it works it works from module.js
Webpack 會(huì)分析入口文件，解析包含依賴關(guān)系的各個(gè)文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會(huì)給每個(gè)模塊分配一個(gè)唯一的 id 并通過這個(gè) id 索引和訪問模塊。在頁面啟動(dòng)時(shí)，會(huì)先執(zhí)行 entry.js 中的代碼，其它模塊會(huì)在運(yùn)行 require 的時(shí)候再執(zhí)行。
5.loader載入任意模塊資源（以加載css為例）
- 安裝
style-loadercss-loader
npm install css-loader style-loader
- 新建css文件styel.css
body{
background:red;
}
- 在入口文件entry.js中引入文件
require("./style.css");
document.write("it works");
document.write(require("./module.js"));
- 重新編譯entry.js至bundle.js
webpack entry.js bundle.js --module-bind 'css=style!css'
- 刷新頁面，頁面背景為紅色
6.配置
配置文件中主要配置一些webpack執(zhí)行命令的一些參數(shù)和插件，以下是配置5中css-loader的命令參數(shù)例子：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: "./",
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
}
}
配置完以上參數(shù)后，5中在重新編譯的時(shí)候只需執(zhí)行以下命令即可
webpack
7.插件
在webpack中使用插件非常的簡單，只需要在配置文件中配置插件即可
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: "./",
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by llz')
]
}
以上的plugins配置選項(xiàng)中配置的插件就是在bundle.js的文件頭部插入注釋
8.開發(fā)環(huán)境與調(diào)試
- 啟用webpack服務(wù)器
webpack-dev-server
- 啟用webpack文件修改實(shí)時(shí)監(jiān)控
webpack --watch
- webpack顯示文件編譯進(jìn)度
webpack --progress
- 打印編譯詳細(xì)日志
webpack --display-error-details
