webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。 webpack v4.0.0 開始，可以不用引入一個配置檔案。
安裝
npm install -g webpack
npm install -g webpack-cli
複製程式碼需要先全域性安裝你才可以使用webpack命令，然後再安裝到你的專案依賴。 如果你使用 webpack 4+ 版本，你還需要安裝 CLI。
新建專案
mkdir webpack-demo && cd webpack-demo //建立並進入webpack-demo資料夾
npm init -y // 初始化專案package.json檔案
npm install -D webpack webpack-cli // 本地安裝 webpack和webpack-cli
複製程式碼使用預設配置去構建
mkdir demo1 && cd demo1
touch index.html
mkdir src && cd src
touch index.js
複製程式碼index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- webpack會把src/index.js檔案打包到dist目錄mian.js -->
<script src="./dist/main.js"></script>
</body>
</html>
複製程式碼src/index.js
let a = 1;
alert(a);
複製程式碼執行 webpack 命令。就可以看到檔案被打包到dist資料夾了。開啟index.html檔案就會彈出1。 webpack4.0可以不用寫配置檔案，然而大多數專案會需要很複雜的設定，需要你自己去配置。
使用配置檔案
cd .. // 返回到webpack-demo資料夾
touch webpack.config.js // 建立配置檔案
touch index.html
mkdir demo2 && cd demo2 // 建立demo2資料夾
mkdir src && cd src
touch index.js
複製程式碼webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口檔案
output: { // 出口檔案
filename: 'bundle.js', // 打包後命名為bundle.js
path: path.resolve(__dirname, 'dist') // 輸出的路徑
}
};
複製程式碼在專案的demo2目錄執行webpack。如下圖就代表打包成功。開啟demo2下面的index.html 就可以彈出我的部落格地址。
使用babel轉換es6語法 => es5
安裝babel
在webpack-demo路徑下執行命令
npm install --save-dev babel-loader babel-core babel-preset-env
複製程式碼把demo2複製一份命名為demo3，在src目錄下再新建a.js。 src/a.js
export default lanpangzhi = "blog.langpz.com";
複製程式碼src/index.js
import lanpz from "./a.js";
console.log(lanpz);
複製程式碼webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口檔案
output: { // 出口檔案
filename: 'bundle.js', // 打包後命名為bundle.js
path: path.resolve(__dirname, 'dist') // 輸出的路徑
},
module: {
rules: [
{
test: /\.js$/, // 匹配所有.js結尾的檔案
exclude: /node_modules/, // 忽略node_modules資料夾
use: {
loader: 'babel-loader' // 使用babel-loader轉義
}
}
]
}
};
複製程式碼新建 .babelrc 檔案
touch .babelrc
複製程式碼.babelrc
{
"presets": ["env"]
}
複製程式碼執行webpack就可以看見打包成功了。
babel-polyfill
由於 Babel 只轉換語法(如箭頭函式)， 你可以使用 babel-polyfill 支援新的全域性變數，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。 在webpack-demo路徑下執行命令
npm install --save babel-polyfill // 安裝babel-polyfill
複製程式碼在 webpack.config.js 中，將 babel-polyfill 加到你的 entry 陣列中。
module.exports = {
entry: ["babel-polyfill", "./src/index.js"]
};
複製程式碼執行webpack命令，如下圖就成功了。