本文參考學(xué)習(xí)文章[https://doc.webpack-china.org/guides/getting-started/#-]
起步
- 初始化項目文件 ：
npm init
- 本地安裝webpack (如果系統(tǒng)未全局安裝webpack，可使用)：
npm install --save-dev webpack
- 新建文件index.html，src/indexl.js,dist(文件夾)這時文件目錄如下：
微信截圖_20171212173234.png
<!DOCTYPE html>
<html>
<head>
<title>Hello Webpack</title>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
index.js
function component() {
var element = document.createElement('div');
element.textContent ="Hello webpack";
return element;
}
document.body.appendChild(component());
到目前為止一切都很正常是吧！沒錯，精彩正式開始
更改index.html中的js引用，改為這樣的：
<script src="./dist/bundle.js"></script>
先別著急問，bundle.js是個什么鬼，緊接著在命令行執(zhí)行一條命令：
webpack src/index.js dist/bundle.js
當(dāng)出現(xiàn)以下命令
運行webpack.png
這時打開dist文件夾后，發(fā)現(xiàn)多了一個東東：
微信截圖_20171212174650.png
這是在瀏覽器中打開HTML，應(yīng)該可以看到這樣一行字：“Hello webpack”
這個dist到底是什么意思呢，我引用了參考博客里的一句話：
，將“源”代碼(/src)從我們的“分發(fā)”代碼(/dist)中分離出來。“源”代碼是用于書寫和編輯的代碼。“分發(fā)”代碼是構(gòu)建過程產(chǎn)生的代碼最小化和優(yōu)化后的“輸出”目錄，最終將在瀏覽器中加載
到此為止，還是有一點小小的成就感的！但是回頭一想，每次都這么敲，好麻煩，好弱智哦，有沒有更加簡便的方式呢？
使用配置文件
- 根目錄下新建一個webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
}
};
這個時候再鍵入命令：
webpack --config webpack.config.js
這時候發(fā)現(xiàn)dist里面同樣會生成bundle.js，打開瀏覽器后發(fā)現(xiàn)效果是一樣的。
