創建一個文件夾然後進去初始化
mkdir webpack-test
cd webpack-test/
npm init
安裝webpack
npm install --save-dev webpack
安裝webpack-cli
npm install --save-dev webpack-cli
安裝 style-loader css-loader
用於支持css文件
npm install --save-dev style-loader css-loader
安裝file-loader
用於支持圖片
npm install --save-dev file-loader
創建需要的文件
1.webpack-test中創建src和dist文件夾,創建index.html和webpack.config.js文件
1.src文件夾中創建index.js文件,index.css文件,移入一張圖片,我的是dog.jpg
目錄結構
|- /webpack-demo
|- /node_modules
|- package.json
|- webpack.config.js
|- index.html
|- /dist
|- /src
|- index.js
|- index.css
|- dog.jpg
介紹各個文件
1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>
dist/main.js後面執行命令後會自己生成現在不用管寫上就是
2.index.js
import './index.css';
var myspan = document.createElement('span');
var mydiv = document.createElement('div');
myspan.innerHTML = '我是span';
mydiv.classList.add('mydiv');
document.body.appendChild(myspan);
document.body.appendChild(mydiv);
上面引入了css文件,前面必須./不然後面會報錯
3.index.css
.mydiv{
width: 440px;
height: 285px;
border: 1px solid red;
background: url("dog.jpg");
}
4.dog.jpg
5.配置 webpack.config.js(重要)
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
publicPath:'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
簡單的說一下配置
entry:配置輸入文件,所以我們上面創建了文件夾和文件
output
filename:配置輸出文件名
path:輸出文件路徑,所以我們創建了dist文件夾用於輸出
publicPath:'dist/' 用來指定靜態資源發佈地不然後面圖片會找不到的
下面兩個test中就是配置遇到css文件和圖片怎麼處理
6.配置package.json
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"style-loader": "^0.23.0",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0"
}
}
裏面加上了一句"build":"webpack"
這樣就可以直接 npm run build執行構建命令
你也可以選擇npx webpack --config webpack.config.js
執行命令
npm run build
有個警告,不想管它。。。
進入index.html
好了,沒毛病,完成了基本的構建
最後來看看目錄結構怎麼樣了
|- /webpack-demo
|- /node_modules
|- package.json
|- webpack.config.js
|- index.html
|- /dist
|- 9b813c11448cd599e7e8fdb1b316a9af.jpg
|- main.js
|- /src
|- index.js
|- index.css
|- dog.jpg
多了個main.js和一個賊長一串的jpg圖片(就是那個dog.jpg)