安裝
通過 npm 安裝 Webpack
npm install webpack -g
具體步驟可以查看上一節內容
開始
我們先來學習一些最基本的 Webpack 命令
創建一個模塊化的 Javascript 項目
讓我們先來創建幾個 Javascript 模塊
cats.js
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js (Entry Point)
cats = require('./cats.js');
console.log(cats);
入口點 entry point 是整個項目的啟動腳本，Webpack 將從這里追蹤所有的依賴
給 Webpack 五秒鐘
告訴 Webpack 入口點腳本 (app.js) ，并告訴他輸出腳本的名字 (app.bundle.js):
webpack ./app.js app.bundle.js
Webpack 將讀取和分析入口點腳本，并正確載入依賴，最后將他們全部打包成一個文件，即 app.bundle.js
下面讓我們運行生成的腳本
node app.bundle.js
["dave", "henry", "martha"]
當然，你也可以在瀏覽器中引用它
繼續
除了命令行，我們還可以通過配置文件，使用更多 Webpack 的功能
項目結構
一般情況下，我們把源文件和打包后的文件放在不同的文件夾里面。在這個項目中，源文件放在 src 文件夾下，打包文件放在 bin 文件夾下。
項目的目錄結構如下圖
1 創建目錄
mkdir bin
mkdir src
2 將源文件移動到 src 文件夾下
mv app.js cats.js src
3 用 npm 初始化項目
npm init # (answer the questions)
4 安裝 Webpack 作為開發環境下的依賴
npm install --save-dev webpack
啟用配置文件
現在項目已經變得比較復雜了，再使用命令行會比較笨拙，到了該啟用配置文件的時候了。
1 創建 webpack.config.js
module.exports = {
//設置入口點腳本
entry: './src/app.js',
//設置輸出腳本
output: {
path: './bin',
filename: 'app.bundle.js'
}
};
配置文件是一個 Node 樣式的模塊，因此可以運行任意代碼，只要最終導出一個配置對象即可。
2 有了配置文件，我們的命令行就很簡單了
webpack
3 運行
node bin/app.bundle.js
["dave", "henry", "martha"]
使用加載器 loaders
Webpack 自身只支持 Javascript 語言，對于其他語言，如 ES2015， CoffeeScript，TypeScript 等等，則需要用加載器將他們翻譯轉換成 Javascript
例如， babel-loader 利用 Babel 加載 ES2015 文件
再比如，json-loader 會將原生 JSON 文件轉換成一個 CommonJs 模塊
多個加載器可以組成一個轉換鏈，比如，對于一個 YAML 文件，可以先使用 yaml-loader 將其轉換成 JSON 文件，然后再用 json-loader 將其轉換成 Javascript
用 babel-loader 轉換 ES2015
1 首先安裝 Babel 核心庫和語言預設
npm install --save-dev babel-core babel-preset-es2015
2 安裝 babel-loader
npm install --save-dev babel-loader
3 配置 Babel 預設，將其添加到 .babelrc 配置文件中
{ "presets": [ "es2015" ] }
4 修改 webpack.config.js 配置文件，讓 babel-loader 使用處理所有的 JS 文件
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
}
}
注意，在這里我們排除了
node_modules文件夾，因為這個文件夾里面都是我們安裝的庫，不需要處理。
5 安裝生產環境下需要的庫
npm install --save jquery babel-polyfill
注意，這里我們使用了
--save而不是--save-dev，因為這兩個庫是在生產環境下使用的。
6 編輯 src/app.js ，注意，這里使用了 ES6 語法
import 'babel-polyfill';
import cats from './cats';
import $ from 'jquery';
$('<h1>Cats</h1>').appendTo('body');
const ul = $('<ul></ul>').appendTo('body');
for (const cat of cats) {
$('<li></li>').text(cat).appendTo(ul);
}
7 打包、編譯
webpack
8 創建一個 index.html 文件，引入生成的包
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bin/app.bundle.js" charset="utf-8"></script>
</body>
</html>
打開 index.html ，可以看到如下結果：
使用插件
有時候我們還想對生成的包進行一些額外處理，比如說壓縮之類的，這時候就有使用到插件了，配置文件如下：
const webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
]
}
重新生成后，我們發現 uglify 插件將輸出包的尺寸從原來的 1618 字節壓縮到 308 字節
