1.Download nodejs
2.Init WebPack Project
mkdir webpackproj
cd webpackproj
code . # 進入VS Code
npm init # 建立專案
npm i webpack -D # -D = --save-dev
3.webpack說明
1.Entry: webpack.config.js 專案入口
2.Output: webpack.config.js 專案產出檔
3.Loaders: 加module，根據規則去建立好檔案
4.Plugins: 除了讀檔外
5.Mode: Develop / Production , Ex. file size (compress)
3-1.webpack.config.js
const path = require('path')
module.exports = {
entry: '.src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.bundle.js'
}
};
Command
npm run build # will install webpack-cli
4.啟動server執行
package.json
...
"scripts": {
"build": "webpack",
"dev": "webpack serve"
},
...
Command
npm run dev # will install webpack-dev-server
localhost:8080/webpack-dev-server
5.建立index.html
# 先Key !，會產出預設的html檔
<!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>Document</title>
</head>
<body>
http://./main.bundle.js
</body>
</html>
6.dev server config
7.use css file
webpack預設只看得懂html, 要認識css要裝loader, 裝css loader & style loader
npm install --save-dev css-loader
npm install --save-dev style-loader
webpack.config.js
...
module: {
rules: [
{
test: /\\.css$/i,
use: ['style-loader', 'css-loader'],
}
]
}
...
index.css
div {
width: 100px;
height: 100px;
background-color: yellow;
}
index.js
import './index.css'
console.log("hello");
console.log("hello");
console.log("hello");
index.html
<body>
http://./main.bundle.js
<div></div>
</body>
Command
npm run dev
8.bund hash for plugin
webpack.config.js
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.**[hash]**.bundle.js'
},
install html-webpack-plugin
npm install --save-dev html-webpack-plugin
npm install --save-dev mini-css-extract-plugin
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module: {
rules: [
{
test: /\\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
}
]
},
plugins: [new HtmlWebpackPlugin({
template: './base.html'
}),
new MiniCssExtractPlugin({
filename: 'main.[hash].css'
})
],
base.html
<!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>Document</title>
</head>
<body>
http://./main.bundle.js
<div id="num">0</div>
<button id="btn">加1</button>
</body>
</html>
index.js
import './index.css'
const btn = document.getElementById('btn');
const num = document.getElementById('num');
btn.addEventListener('click', function() {
const numVal = parseInt(num.innerHTML, 10);
console.log('numVal: ' + numVal);
num.innerHTML = numVal + 1;
})
9.babel: 讓所有瀏覽器都看得懂
Babel · The compiler for next generation JavaScript
將Babel加入webpack
# <https://babeljs.io/setup#installation>
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
webpack.config.js
{
module: {
rules: [
{
test: /\\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
}
]
}
}
babel.config.json
{
"presets": ["@babel/preset-env"]
}
index.js
...
class Test {
#a = 1
b = 2
}
const tt = new Test()
// TODO del
console.log('tt.a', tt.a);
console.log('tt.b', tt.b);
10.sourcemap
webpack.config.js
...
devtool: 'source-map',
...
11.raw-loader: Ex.image, file…
index.css
div {
width: 1000px;
height: 1000px;
background-color: yellow;
background-image: url('./cat.png');
}
webpack.config.js
module: {
rules: [
{
...
{
test: /\\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
}
]
},
葛麗絲的分享世界 