webpack 是什么？
webpack 是一個模塊加載器兼打包工具，它能把各種資源，例如 js、ts、jsx、css、less、scss、圖片等都作為模塊來使用和處理。
先看一下本例中最終的目錄結(jié)構(gòu)
使用 webpack 前需先安裝 NodeJS
直接上官網(wǎng)的例子
創(chuàng)建一個文件夾并切換到此文件夾
mkdir webpack-demo && cd webpack-demo
使用 npm init 初始化項目
npm init -y
此時目錄下會生成一個 package.json 文件，該文件中記錄著項目相關(guān)的信息。
**安裝 webpack **
npm install --save-dev webpack
--save-dev 參數(shù)說明將 webpack 作為開發(fā)依賴安裝。
安裝 lodash （非 webpack 運行必須，只是后面的代碼中會用到）
npm install --save lodash
--save 參數(shù)說明將 lodash 作為項目運行時依賴安裝。
在項目根目錄下創(chuàng)建一個子目錄 app 并在此目錄中創(chuàng)建 index.js 文件。
app/index.js
import _ from 'lodash';
function component () {
var element = document.createElement('div');
/* 下一行中會使用 lodash */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
新建一個 index.html 文件，打包好的文件在此文件中使用。
index.html
<html>
<head>
<title>webpack 2 demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
bundle.js 是最終生成的文件。
睜大眼睛仔細(xì)看，最重要的姿勢來了。
webpack.config.js
在項目根目錄下創(chuàng)建這個文件
// 引入 path 模塊，這是 nodejs 內(nèi)置的模塊，用于處理路徑
const path = require('path');
// 導(dǎo)出了一個對象，webpack 就是根據(jù)該對象對項目進行各種操作的
module.exports = {
// 入口文件，項目將從這個文件開始編譯
entry: './app/index.js',
// 出口文件
output: {
filename: 'bundle.js', // 出口文件名稱
path: path.resolve(__dirname, 'dist') // 出口文件路徑
}
};
__dirname 表示該文件所在目錄，在這個項目中 path.resolve(__dirname, 'dist') 表示的是 webpack-demo/dist 目錄。
在配置一下 package.json 文件就可以運行了
打開 package.json
在 scripts 中加入 build 字段：
"scripts": {
"build": "webpack --config webpack.config.js --progress --colors"
}
可以看到 webpack 命令后有三個參數(shù)：
--config 指定使用的配置文件為 webpack.config.js
--progress 在控制臺顯示編譯進度
--colors 指定控制臺為彩色輸出
好了，讓我們來運行 webpack 吧
在控制臺輸入如下命令：
npm run build
最后，看到有如下輸出則表示編譯成功
> webpack-demo@1.0.0 build D:\workspace\webpack\webpack2\webpack-demo
> webpack --config webpack.config.js --progress --colors
Hash: b92a9f2483fc4492ccc9
Version: webpack 2.2.1
Time: 592ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./app/index.js 278 bytes {0} [built]
此時，項目根目錄下會生成 dist/bundle.js 文件
現(xiàn)在，用瀏覽器打開 index.html 文件來見證一下奇跡吧。_
