系列部落格連結
程式碼
初始化專案
-
建立專案
mkdir webpack4-democd webpack4-demo -
npm init -y -
安裝
npm install webpack --save-dev -
安裝指定版本
npm install --save-dev webpack@<version> -
webpack 4+ 版本，還需要安裝webpack-cli
npm install webpack-cli --save-dev
建議本地安裝webpack和webpack-cli 目前webpack最新版本為：4.30.0，也是本文學習webpack使用的版本
專案目錄結構
執行npx webpack index.js命令，生成dist目錄，dist目錄下是對index.js打包後得到的檔案，預設是main.js檔案。
webpack4的簡單配置
entry和output配置
webpack.config.js檔案
const path = require('path')
module.exports={
mode: 'development', //development: 開發環境 production：生產環境
//入口檔案配置
//entry: './src/index.js',
//等價於
/*entry: {
main: './src/index.js'
},*/
entry: {
index: './src/index.js'
},
//打包完成後檔案存放位置配置
output: {
//filename 設定打包後檔案的名字
//如果不設定filename，則檔案的名字跟入口檔案路徑的屬性名一樣
filename: 'bundle.js',
//path 設定打包完成後檔案存放路徑
path: path.resolve(__dirname,'dist')
}
}
複製程式碼在專案根目錄下新建src資料夾，在src資料夾下新建index.js(入口檔案)檔案
執行npx webpack命令
npx webpack等價於npx webpack --config webpack.config.js
當配置檔案命名為webpack.config.js時可以省略--config *.js直接執行npx webpack即可，否則執行npx webpack --config 配置檔名。
結果
在package.json中配置'script'來執行npx webpack命令。
"scripts": {
"start": "webpack"
}
複製程式碼新增"start": "webpack"，執行npm run start效果等價於執行npx webpack命令。
配置webpack.config.js的modoule物件
modoule物件主要是對loader的配置
file-loader的使用
安裝
file-loadernpm i file-loader --save-dev
webpack.config.js檔案
const path = require('path')
module.exports={
mode: 'development', //development: 開發環境 production：生產環境
//入口檔案配置
//entry: './src/index.js',
//等價於
/*entry: {
main: './src/index.js'
},*/
entry: {
index: './src/index.js'
},
//打包完成後檔案存放位置配置
output: {
//filename 設定打包後檔案的名字
//如果不設定filename，則檔案的名字跟入口檔案路徑的屬性名一樣
filename: 'bundle.js',
//path 設定打包完成後檔案存放路徑
path: path.resolve(__dirname,'dist')
},
module: {
rules:[
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]', //對打包後的圖片命名
outputPath: 'images/' //打包後圖片放的位置 dist\images
}
}
}
]
}
}
複製程式碼index.js檔案
//index.js
//import匯入圖片
import image from './images/11.png'
let img=new Image()
img.src=image
document.body.append(img)
複製程式碼npm run start後的目錄結構
在dist目錄下出現了images目錄和圖片，建立index.html，引入js檔案，在瀏覽器中開啟就可以看到圖片。
url-loader的使用
url-loader安裝npm i url-loader -D
url-loader的作用跟'file-loader'的作用很類似
webpack.config.js檔案的module物件中新增url-loader配置
module: {
rules:[
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]', //對打包後的圖片命名
outputPath: 'images/', //打包後圖片放的位置 dist\images
limit: 2048
//1024 == 1kb
//小於200kb時打包成base64編碼的圖片否則單獨打包成圖片
}
}
}
]
}
}
複製程式碼url-loader打包的圖片是字串，base64編碼的圖片，並且打包進index.js檔案中。
limit屬性：當圖片大小大於屬性值時打包成單獨的圖片，否則打包成base64編碼的圖片。
因為base64編碼的圖片比較大，所以圖片比較小時打包成base64編碼的圖片，圖片比較大時單獨打包成一張圖片。
對css和scss的打包
安裝相應的loader
npm i css-loader style-loader -Dnpm i node-sass sass-loader -Dnpm i postcss-loader -Dnpm i autoprefixer -D
postcss-loader和autoprefixer配合使用可以在打包過程中自動新增字首
在專案根目錄下新建postcss.config.js，配置如下
//postcss.config.js
module.exports={
plugins: [
require('autoprefixer')
]
}
複製程式碼在webpack.config.js檔案的module物件中新增配置
module:{
rules:[
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
'postcss-loader'
//加字首 npm i autoprefixer -D
//在專案根目錄下配置postcss.config.js檔案
]
},
{
test: /\.scss$/,
use:[
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
//importLoaders
//用於配置css-loader作用於@import的資源之前有多少個loader先作用於@import的資源
}
},
'postcss-loader',
'sass-loader'
]
}
]
}
複製程式碼//index.js
import './style.css'
import image from './images/11.png'
import './index.scss'
let img=new Image()
img.src=image
let root=document.getElementById('root')
root.append(img)
複製程式碼css模組化
//webpack.config.js
module:{
rules: [
{
test: /\.scss$/,
use:[
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
//importLoaders
//用於配置css-loader作用於@import的資源之前有多少個loader先作用於@import的資源
modules: true //載入css模組化打包，避免樣式檔案之間相互影響
}
},
'postcss-loader',
'sass-loader'
]
}
]
}
複製程式碼//index.js
import image from './images/11.png'
import style from './index.scss'
let img=new Image()
img.src=image
//style.img .img是scss檔案中寫好的類名
img.classList.add(style.img)
let root=document.getElementById('root')
root.append(img)
//scss
.img{
width: 150px;
height: 150px;
border: 10px solid goldenrod;
background: red;
border-radius: 30%;
}
複製程式碼結果
可以看到新增了一個class，類名是一串比較複雜的字串，從而避免這個樣式對別的元素產生影響。