webpack4.0入門學習筆記（一）
初始化專案
- 建立專案
mkdir webpack4-demo
cd 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-loader
npm 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 -D
npm i node-sass sass-loader -D
npm i postcss-loader -D
npm i autoprefixer -D
在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的資源
}
},
'sass-loader',
'postcss-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模組化打包，避免樣式檔案之間相互影響
}
},
'sass-loader',
'postcss-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，類名是一串比較複雜的字串，從而避免這個樣式對別的元素產生影響。