建立package.json 指令
安裝webpack 指令
1
2
| npm install webpack webpack-cli --save
npm install webpack webpack-cli --save-dev
|
建立src資料夾 dist資料夾
src
helper.js
1
2
3
4
5
| export default{
fn1(){
console.log('this is helper fn')
}
}
|
main.js
1
2
3
| import helper from './helper'
helper.fn1()
|
dist
index.html
1
| <script src="main.bundle.js"></script>
|
建立webpack.config.js
1
2
3
4
5
6
7
8
9
| const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.bundle.js'
}
};
|
修改package.json檔
加入 build 設定
1
2
3
4
| "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
|
開始build
支援打包css
安裝指令
1
| npm install style-loader --save
|
加入 style.css
1
2
3
| body{
background-color: green;
}
|
修改main.js
1
2
3
| import helper from './helper'
import './style.css'
helper.fn1()
|
修改webpack
1
2
3
4
5
6
7
8
9
10
11
| module.exports = {
...
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
|
執行build
我們會發現在css的相關語法已經轉成js打包在main.bundle.js 裡面
參考：npm css loader
支援打包scss
安裝指令
1
| npm install sass-loader sass webpack --save-dev
|
加入 all.scss
1
2
3
4
5
| $body-color: red;
body {
background-color: $body-color;
}
|
修改webpack.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| module: {
rules: [
{
...
},
{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
"sass-loader",
],
},
],
},
|
如果要找image , 一樣的概念尋找 image loader 關鍵字進行安裝
webpack dev server 安裝
1
| npm install webpack-dev-server --save
|
修改webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
| module.exports = {
mode: 'development',
...
...
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 9000,
},
}
|
修改package.json
1
2
3
4
5
| "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack server --open",
"build": "webpack"
}
|
mode差異
mode:’development’
未壓縮
mode:’production’
壓縮過
執行指令
html-webpack-plugin
安裝指令
1
| npm install --save-dev html-webpack-plugin
|
修改webpack.config.js
1
2
3
4
5
6
7
8
9
| const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.[hash].bundle.js'
},
plugins: [new HtmlWebpackPlugin()],
}
|
我們可以透過這個插件，在dist資料夾底下自動產生index.html ，並且配上hash方法，讓每次js名稱都有所不同，避免每次佈署時的緩存問題
樣版功能
修改webpack.config.js
1
2
3
| plugins: [new HtmlWebpackPlugin({
template:'./src/base.html'
})],
|
新增base.html
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kite</title>
</head>
<body>
<header>kite blog</header>
</body>
</html>
|
npm run build 產生的index.html 會依照這份樣版進行複製產生，並加入index.bundle.js
修改webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
...
plugins: [new HtmlWebpackPlugin({
template:'./src/base.html'
}),
new MiniCssExtractPlugin({
filename:'main.[hash].css'
})
...
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
],
},
}
|
透過這個外掛，可以讓css獨立打包成一個檔出來，不會轉譯成以js寫出的css
接續看
https://youtu.be/uP6KTupfyIw?t=4204
參考網站
npm trends
為什麼要webpack
轉譯套件成js、html、css
壓縮
用套件工具輕鬆達到不同瀏覽器的前綴語法