一、基礎配置
1.創建一個名為demo-webpack的文件夾(名稱隨意)
2.初始化一個package.json文件
//在cmd窗口中使用以下命令快速創建
npm init -y
3.安裝webpack和webpack-cli到開發依賴下
npm i webpack -D
npm i webpack-cli -D
4.配置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.json
7.配置打包模式
在第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/