在一個合適的文件夾下npm初始化
npm init
安裝webpack
cnpm install webpack --save-dev
創(chuàng)建webpack.config.js文件李破，也可以鼠標右鍵創(chuàng)建（下同宠哄，省略）。
touch webpack.config.js
建立一個app文件夾
mkdir app
在app文件夾中建立一個main.js的文件和一個index.html文件
cd app // 進入新創(chuàng)建的app文件夾
touch main.js
touch index.html
cd .. // 退出app文件夾嗤攻，到上一層
在main.js中隨便寫點什么毛嫉，比如
var app = document.getElementById("app");
app.innerHTML = "This is an example";
在index.html中隨便寫點什么，其中id要與上面的代碼對應
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is an example</title>
</head>
<body>
<div class="">
<p id="app"></p>
</div>
<script type="text/javascript" src="../build/bundle.js"></script>
</body>
</html>
在webpack.config.js文件中加入如下代碼妇菱，其中其中publicPath是后面配置webpack.dev.server的時候用的承粤。
var path = require("path");
module.exports = {
entry: {
app: ["./app/main.js"]
},
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/assets/",
filename: "bundle.js"
}
};
運行以下webpack，先編譯下試試恶耽，因為只是局部安裝，所以運行的時候要這樣
node_modules/.bin/webpack
運行完之后就可以在terminal中看到運行的結(jié)果颜启，工作目錄中也會自動創(chuàng)建了一個build的文件夾偷俭，里面有一個bundle.js的文件，這些都是在上面webpack.config.js里面配置的結(jié)果缰盏。
瀏覽器打開index.html看看
先進入app文件夾
cd app
打開index.html的三種方法
open index.html // 默認瀏覽器打開
open -a /Applications/Google\ Chrome.app index.html // chrome打開涌萤，前提是你的chrome放在了Applications里面
open -a "Google Chrome" index.html //你也不知道chrome在哪，就用這個
安裝webpack-dev-server口猜，下面cd的命令就不寫了
cd .. // 因為上一步進入app文件夾了负溪，所以要退出來
npm install webpack-dev-server --save-dev
把index中的../build/bundle.js改成/assets/bundle.js這個與上面設置的publicPath有關。如果沒有publicPath济炎，那這個路徑就直接寫成bundle.js
在命令行輸入
node_modules/.bin/webpack-dev-server --content-base app/
運行了之后命令行會提示端口的號碼川抡，這個時候這個命令行在啟動服務，在想用命令行打開瀏覽器就不方便了须尚，所以手動到瀏覽器輸入localhost:8080/index.html崖堤；
另一種iframe模式的操作的區(qū)別只在輸入的網(wǎng)址：localhost:8080/webpack-dev-server/index.html
以上兩種打開網(wǎng)頁的方式選用一種即可。
這個時候要注意的是耐床，生成的bundle.js文件在內(nèi)存中密幔，我們是看不到的。
以后還沒多次的使用開啟服務的命令撩轰，總是這樣輸入大串的命令實在不合適胯甩，所以，到npm初始化時候創(chuàng)建的package.json里面的scripts中加一行代用的命令
"dev": "webpack-dev-server --content-base app/"
再運行的時候就這樣
npm run dev
運行了服務并打開了網(wǎng)頁之后堪嫂，再改動main.js文件偎箫，瀏覽器就可以自動刷新了。
自動刷新HTML
安裝HtmlWebpackPlugin插件皆串，這里要說一下镜廉，這個插件并不是用來刷新HTML的，而是用來一塊打包HTML文件的愚战，真正用來打包的時候的配置并不是這樣的娇唯。
npm install --save-dev html-webpack-plugin
在webpack.dev.server中添加配置
var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 添加在這里
module.exports = {
entry: {
app: ["./app/main.js"]
},
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/assets/",
filename: "bundle.js"
},
plugins: [new HtmlWebpackPlugin({ //添加在這里
template: path.resolve(__dirname, 'app/index.html'),
filename: 'index.html',
inject: 'body'
})]
};
運行一下齐遵，改動html就可以自動刷新了。
自動刷新css
安裝style-loader和css-loader
npm install --save-dev style-loader css-loader
在main.js中引入style.css塔插，由于main.js上面指定的配置中的入口饲鄙，所以不再main.js中引入style.css的話，webpack是找不到這個文件的浙滤。
import './style.css';
在webpack.dev.server中添加配置沃呢，添加在output下面，plugins上面流纹。
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
創(chuàng)建一個css糜烹，隨便寫點什么
p {
background-color: blue;
}
在次再運行，修改css就可以自動刷新了漱凝。
完整代碼在github
博客：https://zhuanyongxigua.github.io
參考：
