webpack用來編譯javascript模塊，安裝成功以後就可以通過cli或者api與webpack交互。
基本設置：
首先創建一個目錄，初始化npm，然後本地安裝webpack，webpack-cli（可以在命令行執行webpack的工具）
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev然後創建如下的目錄結構
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.jssrc/index.js
function component() {
var element = document.createElement('div');
element.innerHTML = 'Hello Webpack';
return element;
}
document.body.appendChild(component());index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>在這個例子中，<script>標籤中明確了依賴的javascript文件，lodash在頁面執行前加載，index.js並沒有使用到_，只是用來確保變量_存在。用這種方式管理javascript項目有以下問題：
- 腳步是否依賴一個外部庫並不是顯而易見的。
- 如果依賴丟失了，或者加載順序不對，應用的功能就會執行不正確。
- 如果依賴引用了但並沒有使用到，就會造成下載不必要的代碼。
下面我們用webpack來管理這些腳本。
創建Bundle
我們在當前目錄執行 npx webpack， npx命令，搭載在Node 8.2或更高版本，可以執行webpack包中的webpack命令。
webpack-demo
|- package.json
|- /dist
|- main.js
|- /src
|- index.js自動在dist目錄下生成了main.js打包後的文件，並自動尋找入口文件index.js. 可以看到webpack4是零配置的，默認是production模式。如果想要開發模式，可以使用 npx webpack -- mode development
index.html並沒有做任何處理，我們將在後面介紹如何處理html文件。
使用配置文件
雖然webpack4不需要任何配置，但是多數項目都需要複雜配置，這也是爲什麼webpack支持配置文件。這也比手動在終端輸入很多命令要高效。下面我們就創建一個配置文件來替代cli的命令選項。
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.jswebpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};以下命令使用配置文件來構建
npx webpack --config webpack.config.jsNPM腳本
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}現在就可以用npm run build命令來替換剛纔使用的npx命令。