前言
為什么要有webpack構(gòu)建和打包？
- 更好的模塊化管理。webpack支持模塊化規(guī)范：代碼分割成獨(dú)立模塊，并管理模塊之間的依賴關(guān)系。
- 資源打包。將js文件、css文件、圖片等多個(gè)資源打包成單個(gè)或多個(gè)文件，減少請(qǐng)求，提高加載性能性能，且webpack支持資源壓縮、優(yōu)化、緩存等處理。
- 轉(zhuǎn)換和編譯。如用Bable將ES6+代碼轉(zhuǎn)為向后兼容版本如ES5，將sass、less、stylus轉(zhuǎn)為瀏覽器能識(shí)別的css代碼，將ts轉(zhuǎn)為js等。
- 代碼拆分和懶加載。當(dāng)應(yīng)用程序變得復(fù)雜時(shí)，打包文件體積也會(huì)變大，導(dǎo)致初始加載時(shí)間太長(zhǎng)。因此可以對(duì)代碼進(jìn)行拆分，按需加載。
- 插件系統(tǒng)和擴(kuò)展性。Webpack具有強(qiáng)大的插件系統(tǒng)，提供了許多插件和工具，以滿足不同項(xiàng)目的需求。
一、webpack基本配置
1.配置拆分和merge
mode表示以什么模式打包；
使用development模式，打包后的代碼可閱讀，沒(méi)被壓縮；
使用production模式，代碼會(huì)被壓縮。
const path = require('path');
module.exports = {
mode:'development', // production 生產(chǎn)環(huán)境
entry:{
app: './src/main.js',
list: './src/main.js'
},
output:{
path.resolve(__dirname, 'dist');
filename: '[name].js'
}
}
開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境是不一樣的，為了解決手動(dòng)改更改mode帶來(lái)的不便，所以將這些打包配置拆分到不同文件中：
- 通用配置：webpack.common.js
- dev配置： webpack.dev.js
- prod配置：webpack.prod.js
// webpack.common.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__dirname,'..'.'dist')
module.exports={
entry:{
path:path.join(srcPath,'index')
}
}
由于我們拆分了配置，公共的一些配置項(xiàng)不需要在dev和prod里面再去重新寫(xiě)，所以我們需要把webpack.common.js分別和dev，prod建立連接。
這時(shí)需要安裝webpack-merge這個(gè)插件
npm i webpack-merge -D
安裝完成后需要在dev和prod里面分別引入:
// webpack.dev.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')
module.exports=merge(webpackCommonConf,{ // 合并
mode:'development'
})
// webpack.prod.js
const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')
module.exports=merge(webpackCommonConf,{ // 合并
mode:'production'
output:{
filename:'bundle.[contentHash:8].js',
path:path.join(distPath)
}
})
然后修改package.json中的build命令：
"scripts":{
"build":"webpack --config build/webpack.prod.js",
"devBuild": "webpack --config build/webpack.dev.js",
}
生產(chǎn)模式打包：npm run build
開(kāi)發(fā)模式打包：npm run devBuild
2. 啟動(dòng)服務(wù)
1）
// webpack.common.js
//首先使用 npm i html-webpack-plugin -D 安裝 html-webpack-plugin
// 然后配置入口文件，啟動(dòng)服務(wù)后會(huì)打包生成html文件
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
plugins:[
new HtmlWebpackPlugin({
template:path.join(srcPath,'index.html'),
filename:'index.html'//打完包以后的文件名稱
chunks:["index"] //這里的chunks代表的意思是引入的是哪一個(gè)入口文件，我引入的就是src下建立的index.js文件
})
]
}
2）安裝 npm i webpack-dev-server -D
// webpack.dev.js 版本4.x
module.exports=merge(webpackCommonConf,{
devServer:{
port:3000,
static:distPath,//根目錄
open:true,//自動(dòng)打開(kāi)瀏覽器
compress:true,//啟動(dòng)壓縮
//如果需要跨域請(qǐng)求接口
proxy:{
'/api':{
target:'http://localhost:3000'
}
}
}
})
- 配置dev命令，在package.json文件中
"script":{
"dev":"webpack-dev-server --config build/webpack.dev.js"
}
npm run dev啟動(dòng)服務(wù)。
3、處理es6，配置babel
對(duì)于現(xiàn)代瀏覽器而言，有些ES6語(yǔ)法是無(wú)法被解析的，因此需要babel將ES6解析ES5，這也解決了瀏覽器兼容性問(wèn)題。
1）首先安裝babel-loader：
npm i babel-loader -D //我這里是^8.0.6版本的
npm i babel-core -D//babel-core包含了一些babel里面的api
npm i babel-preset-env -D //提供執(zhí)行環(huán)境
2）在根目錄新建.babelrc文件
{
"presets": ["babel-preset-env"],
"plugins": []
}
3）在webpack.common.js中配置babel
module.exports = {
// ...
module:{
rules:[
{
test:/\.js$/,
loader:['babel-loader'],
include:srcPath,
exclude:/node_modules/
}
]
}
// ...
}
4、處理樣式
一般也是在webpack.common.js中配置，無(wú)論在開(kāi)發(fā)模式還是生產(chǎn)模式都需要處理樣式。
1）對(duì)于css文件
安裝：
npm i css-loader -D
npm i style-loader -D
配置如下：
module:{
rules:[
{
test:/\.css$/,
loader:['style-loader','css-loader']//執(zhí)行順序?yàn)閺暮蟮角?/span>
}
]
}
2）對(duì)于less等預(yù)處理器
安裝：
npm i less -D
npm i less-loader -D
配置：
module:{
rules:[
{
test:/\.less/,
loader:['style-loader','css-loader','less-loader']
}
]
}
3）postcss-loader可以做兼容瀏覽器，有些css語(yǔ)法不是所有瀏覽器都兼容，postcss-loader就可以幫我們做這些事情。
postcss-loader是一個(gè)比較大的插件，里面可以再引入一些別的功能，如autoprefixer：
安裝 : npm install postcss autoprefixer
在公共配置文件中配置postcss：
{
test: /\.css$/,
// loader 的執(zhí)行順序是：從后往前
loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},
配置autoprefixer，新建postcss.config.js，配置如下代碼：
module.exports = {
plugins: [require('autoprefixer')]
}
autoprefixer是一個(gè)后處理程序，而可以同sass、stylus或less等預(yù)處理器共同使用。它適用于普通的css，無(wú)需關(guān)心你要為哪些瀏覽器加前綴，只需關(guān)注于實(shí)現(xiàn)，并使用w3c最新規(guī)范。一般配合postcss一起使用
5、處理圖片
對(duì)于圖片的處理一般分為dev和prod環(huán)境下的處理，主要原因是圖片一般是在根目錄下，打包以后希望全部輸出到img文件夾里面，而且需要對(duì)圖片的大小做一些精細(xì)化的配置處理。
對(duì)圖片的使用有這三種：
- 在html中的src標(biāo)簽中使用
- 在js中import中使用
- 在css中使用，比如背景圖片
對(duì)于第一種，需要安裝html-withimg-loader：
npm i html-withimg-loader -D //^0.1.16
module:{
rules:[
{
test:/\.html$/
use:'html-withimg-loader'
}
]
}
對(duì)于第二種和第三種情況：安裝file-loader文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-629972.html
npm i file-loader -D
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:'file-loader'
}]
}
webpack.prod.js,在這個(gè)文件里對(duì)圖片做一些精細(xì)化配置，需要安裝url-loader：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-629972.html
npm i url-loader -D
module:{
rules:[{
test:/\.(png|jpg|gif)$/,
use:{
loader:'url-loader',
options:{
limit:1024*5,//小于5kb的圖片會(huì)被輸出為base64格式
outputPath:"/img/" //全部輸出到img文件夾里面
}
}
}]
}
到了這里，關(guān)于關(guān)于webpack的基本配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
