從零開始配置一個簡單的webpack打包
一、基礎配置
1.建立一個名為demo-webpack的資料夾(名稱隨意)
2.初始化一個package.json檔案
//在cmd視窗中使用以下命令快速建立
npm init -y3.安裝webpack和webpack-cli到開發依賴下
npm i webpack -D
npm i webpack-cli -D4.配置package.json
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", + "build": "webpack" },
5.建立入口檔案src/index.js
6.執行npm run build命令測試打包是否正常
打包後將會自動建立dist/main.js檔案，也就是預設的出口檔案
(到這一步為止，目前的目錄結構)
├─dist
└─main.js
├─node_modules
├─src
└─index.js
├─package.json
└─package-lock.json7.配置打包模式
在第6步的時候，你將會看到如下的警告：
這是因為我們還沒有設定打包的模式，所以webpack預設以生產(production)模式完成打包
開始配置
需要在根目錄下建立
webpack預設配置檔案webpack.config.js
// 內容如下：打包模式分為兩種development(開發模式打包) production生產模式打包
const config = {
mode: "development"
}
// 這裡可以直接匯出上面的物件，但是使用變數儲存可以使程式碼更美觀
module.exports = config配置完以上內容後再執行npm run build就會發現先前的警告資訊消失了。
8.配置入口檔案和出口檔案
- 預設的出口檔案為
dist/main.js 預設的入口檔案為
src/index.js依舊是在
webpack.config.js中配置
+ // 引入path模組處理路徑問題 + const path = require('path') const config = { mode: "development", + entry: "./src/index.js", + output: { + path: path.join(__dirname, './dist'), + filename: "main.js" + } } module.exports = config
二、loader配置
通過以上的步驟就已經搭建了一個簡單的webpack架子，然後讓我們新增一個css檔案來測試下打包
- 先在根目錄下新建一個
index.html，然後再新建一個src/styles/index.css檔案 - 內容如下
①在index.html中新增一些簡單的結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>②在src/styles/index.css新增一些簡單的樣式
body {
background-color: pink;
}③在index.js中引入css檔案
import './styles/index.css'④最後，執行npm run build打包，並得到如下報錯資訊
報錯部分明確的告訴你'You may need an appropriate loader to handle this file type'
翻譯過來大致就是：你或許需要一個適當的載入器來處理這個型別的檔案
所以接下來我們需要下載用於解析CSS檔案的loader
- 直接使用如下命令安裝
style-loader和css-loader
npm i style-loader css-loader -D- 然後在
webpack.config.js中新增如下配置
const config = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.join(__dirname, './dist'),
filename: "main.js"
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
}- 最後執行
npm run build就可以開啟根目錄下的index.html檔案預覽一番了
什麼?你說頁面有點醜? 那告訴你怎麼打包一個優美的圖片好了
操作如下：
①在
src/assets資料夾下放入一張優美的圖，這裡放入的是pretty.png②在
index.html的body中新增如下程式碼<div id="app"> <img id="img" src="nothing.png" alt=""> </div>③在
src/index.js中匯入這張圖片並動態設定給img標籤
import pic from './assets/pretty.png'
const img = document.getElementById('img')
img.src = './dist/' + pic;④執行npm run build打包，並得到如下報錯
同樣，這裡需要配置對應的載入器來載入圖片檔案。
所以還是老套路，先下載載入器，然後在webpack中配置一下
①安裝file-loader載入器
npm i file-loader -D②在webpack.config.js中新增配置
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
+ {
+ test: /\.png$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}③執行npm run build就可以看到優美的圖片了
PS:
- 如果這裡你用的不是
.png字尾的圖片的話，需要在上面正則匹配(test: /\.png$/)中修改一下哈 - 因為
webpack最初是用於打包js檔案的，所以如果想要打包其它型別的檔案都需要配置對應的loader - 配置的方法和上面講述的都大同小異，載入器在
webpack官方也都有列出不少 - 地址：https://www.webpackjs.com/loaders/