整理自官網(wǎng)指南
版本：webpack 4.*
安裝
npm install --save-dev webpack
npm install --save-dev webpack-cli
起步(基本構(gòu)建過程)
新建工程
npm install webpack webpack-cli --save-dev
npm init -y
webpack前
- index.html
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
- src/index.js
function component() {
var element = document.createElement('div');
// Lodash（目前通過一個 script 腳本引入）對于執(zhí)行這一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
- 缺點
- 無法立即體現(xiàn)，腳本的執(zhí)行依賴于外部擴(kuò)展庫(external library)垫蛆。
- 如果依賴不存在承冰，或者引入順序錯誤亭引，應(yīng)用程序?qū)o法正常運(yùn)行断箫。
- 如果依賴被引入但是并沒有使用，瀏覽器將被迫下載無用代碼藕畔。
使用webpack構(gòu)建
- npm install --save lodash
- webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
- src/index.js
import _ from 'lodash';
...
index.js 顯式要求引入的 lodash 必須存在，然后將它綁定為 _（沒有全局作用域污染）莫其。通過聲明模塊所需的依賴，webpack 能夠利用這些信息去構(gòu)建依賴圖耸三，然后使用圖生成一個優(yōu)化過的乱陡，會以正確順序執(zhí)行的 bundle。
- 目錄結(jié)構(gòu)
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
將“源”代碼(/src)從我們的“分發(fā)”代碼(/dist)中分離出來仪壮『┑撸“源”代碼是用于書寫和編輯的代碼』“分發(fā)”代碼是構(gòu)建過程產(chǎn)生的代碼最小化和優(yōu)化后的“輸出”目錄爽彤，最終將在瀏覽器中加載
管理資源
webpack ，將動態(tài)打包(dynamically bundle)所有依賴項（創(chuàng)建所謂的依賴圖(dependency graph)）乏沸。這是極好的創(chuàng)舉淫茵，因為現(xiàn)在每個模塊都可以_明確表述它自身的依賴爪瓜，我們將避免打包未使用的模塊蹬跃。
除了 JavaScript，還可以通過 loader 引入任何其他類型的文件
加載CSS
npm install --save-dev style-loader css-loader
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
在項目中添加一個新的 style.css 文件，并將其導(dǎo)入到我們的 index.js
src/index.js
import _ from 'lodash';
+ import './style.css';
function component() {
var element = document.createElement('div');
// lodash 是由當(dāng)前 script 腳本 import 導(dǎo)入進(jìn)來的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ element.classList.add('hello');
return element;
}
document.body.appendChild(component());
npm run build
以這種方式加載資源蝶缀，可以以更直觀的方式將模塊和資源組合丹喻。無需依賴于含有全部資源的 /assets 目錄，而是將資源與代碼組合在一起翁都。例如碍论，類似這樣的結(jié)構(gòu)會非常有用：
- |- /assets
+ |– /components
+ | |– /my-component
+ | | |– index.jsx
+ | | |– index.css
+ | | |– icon.svg
+ | | |– img.png
這種配置方式會使你的代碼更具備可移植性
管理輸出
增加一個js文件print.js
- 目錄結(jié)構(gòu)
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- print.js
|- /node_modules
- src/print.js
export default function printMe() {
console.log('I get called from print.js!');
}
- src/index.js
import _ from 'lodash';
+ import printMe from './print.js';
function component() {
var element = document.createElement('div');
+ var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ btn.innerHTML = 'Click me and check the console!';
+ btn.onclick = printMe;
+
+ element.appendChild(btn);
return element;
}
document.body.appendChild(component());
- dist/index.html
<!doctype html>
<html>
<head>
- <title>Asset Management</title>
+ <title>Output Management</title>
+ <script src="./print.bundle.js"></script>
</head>
<body>
- <script src="./bundle.js"></script>
+ <script src="./app.bundle.js"></script>
</body>
</html>
- webpack.config.js
const path = require('path');
module.exports = {
- entry: './src/index.js',
+ entry: {
+ app: './src/index.js',
+ print: './src/print.js'
+ },
output: {
- filename: 'bundle.js',
+ filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
到目前為止，我們在 index.html 文件中手動引入所有資源柄慰，然而隨著應(yīng)用程序增長鳍悠，并且一旦開始對文件名使用哈希(hash)]并輸出多個 bundle，手動地對 index.html 文件進(jìn)行管理坐搔，一切就會變得困難起來藏研。然而，可以通過一些插件概行，會使這個過程更容易操控蠢挡。
HtmlWebpackPlugin
- npm install --save-dev html-webpack-plugin
- webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
HtmlWebpackPlugin 還是會默認(rèn)生成 index.html 文件。這就是說凳忙，它會用新生成的 index.html 文件业踏，把我們的原來的替換, 所有的 bundle 會自動添加到 html 中。
clean-webpack-plugin:清理 /dist 文件夾
通常涧卵，在每次構(gòu)建前清理 /dist 文件夾勤家，是比較推薦的做法，因此只會生成用到的文件
- npm install clean-webpack-plugin --save-dev
- webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
+ new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
