webpack4基礎安裝與使用
阿新 • • 發佈：2018-12-30
建立一個資料夾然後進去初始化
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）