1好乐、搭建項目
1）迎捺、md webpack5-demo：打開VSCode新建終端绽淘，創(chuàng)建webpack5-demo文件名
2）npm init -y：安裝npm項目初始化
3）npm i webpack webpack-cli -D：安裝webpack和webpack-cli （-D表示安裝開放環(huán)境依賴）
4）入口文件編寫奔脐，創(chuàng)建src
2、webpack.config.js基本配置
const path = require("path")
module.exports={
//打包入口
entry:"./src/main.js",
//打包出口
output:{
// 輸出文件名
filename:"index.js",
// __dirname nodejs的變量星澳，代表當前文件的目錄絕對路徑
path:path.resolve(__dirname, "dist")
}
}
1)新建main.js在main.js里編寫
···
console.log("測試webpack")
···
2）VSCode終端輸入 npx webpack運行
生成如下dist
恭喜webpack運行成功
loader配置
style-loader，css-loader安裝css打包配置
執(zhí)行旱易，npm i style-loader css-loader -D
webpack.config.js編寫
const path = require("path")
module.exports={
//打包入口
entry:"./src/main.js",
//打包出口
output:{
// 輸出文件名
filename:"index.js",
// __dirname nodejs的變量禁偎，代表當前文件的目錄絕對路徑
path:path.resolve(__dirname, "dist")
},
// loader的配置
module:{
rules:[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
// plugins的配置
plugins: [
// 詳細plugins的配置
],
// 模式
mode: 'development', // 開發(fā)模式
// mode: 'production'
}
新建common.css文件編輯css腿堤，在main.js引入
import "./css/common.css"
在dist文件中新建index.html,引入index.js
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="template" content="Dusty Cartridge 0.1" />
<title>css</title>
<script src="./index.js"></script>
</head>
<body>
</body>
</html>
運行：npx webpack，
瀏覽器中運行index.html
css打包成功
less如暖，less-loade笆檀，安裝less打包配置
執(zhí)行，npm i less less-loader -D
module配置
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
// 將less文件編譯成css文件
// 需要下載 less-loader和less
'less-loader'
]
}
創(chuàng)建在css中l(wèi)ess.less盒至，在main.js中引入import "./css/less.less"
運行：npx webpack
運行dist文件中的html
less打包配置成功
sass酗洒，sass-loade，安裝sass打包配置
執(zhí)行枷遂，npm i sass sass-loader -D
步驟與上面一樣不在贅述
module配置
{
test:/\.s[ac]ss$/i,
use:[
'style-loader',
'css-loader',
'sass-loader'
]
}
stylus樱衷，stylus-loade，安裝sass打包配置
執(zhí)行酒唉，npm i stylus stylus-loader -D
module配置
{
test:/\.styl(us)?$/,//兩種結(jié)尾方式styl或者styus
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
}
html打包配置
執(zhí)行矩桂，npm i html-webpack-plugin -D
在src中新建html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="template" content="Dusty Cartridge 0.1" />
<title>html</title>
</head>
<body>
</body>
</html>
刪除dist
在webpack.config.js中配置
引入html-webpack-plugin
配置const HtmlWebpackPlugin= require("html-webpack-plugin")
plugins: [
// 詳細plugins的配置
// html-webpack-plugin
// 功能：默認會創(chuàng)建一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）
// 需求：需要有結(jié)構(gòu)的HTML文件
new HtmlWebpackPlugin({
// 復制 './src/index.html' 文件痪伦，并自動引入打包輸出的所有資源（JS/CSS）
template:'./src/index.html'
})
]
運行：npx webpack
css提取mini-css-extract-plugin
執(zhí)行侄榴，npm i mini-css-extract-plugin -D
webpack.config.js引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins中配置
new MiniCssExtractPlugin({
// 對輸出的css文件進行重命名
filename: "css/style.css",
}),
module中配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader進行處理
use: [
//"style-loader",
MiniCssExtractPlugin.loader,
"css-loader",
],
},
運行：npx webpack
圖片打包url-loader file-loader
執(zhí)行，npm i url-loader file-loader -D
module配置
{
// 默認處理不了html中img圖片
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
// 使用一個loader
// 下載 url-loader file-loader
loader: "url-loader",
options: {
// 圖片大小小于8kb网沾，就會被base64處理
// 優(yōu)點: 減少請求數(shù)量（減輕服務器壓力）
// 缺點：圖片體積會更大（文件請求速度更慢）
limit: 2 * 1024,
// 解析時會出問題：[object Module]
// 解決：關閉url-loader的es6模塊化癞蚕，使用commonjs解析
esModule: false,
// 給圖片進行重命名
// [hash:10]取圖片的hash的前10位
// [ext]取文件原來擴展名
name: "[hash:10].[ext]",
outputPath: "imgs",//路徑根據(jù)項目名稱自定義
},
type: 'javascript/auto'
},
html圖片配置
執(zhí)行，npm i html-loader -D
{
test: /\.html$/,
// 處理html文件的img圖片（負責引入img辉哥，從而能被url-loader進行處理）
loader: 'html-loader'
}
運行：npx webpack
其他資源處理
{
// 處理其他資源
exclude: /\.(node_modules|html|js|css|less|sass|scss|stylus|styl|jpg|png|gif)/,
loader: 'file-loader',
options: {
esModule: false,
outputPath: 'file',
},
type:"javascript/auto",
},
devServer配置
npm i webpack-dev-server -D
devServer: {
// 項目構(gòu)建后路徑
static: {
directory: path.join(__dirname, "public"),
},
// 啟動gzip壓縮
compress: true,
// 端口號
port: 9000,
//啟動瀏覽器open
open: true,
},
package.json配置
"scripts": {
"dev": "webpack serve --config ./webpack.config.js"
},
運行命令：npm run dev
css兼容性處理
執(zhí)行安裝桦山，npm i postcss-loader postcss-preset-env -D
module
{
test: /\.css$/,
use: [
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
// postcss的插件
plugins:[require("postcss-preset-env")],
},
},
},
],
}
package.json配置
development//表示開發(fā)環(huán)境
production//表示生產(chǎn)環(huán)境
"browserslist": {
"development": [
"last 3 chrome version",
"last 3 firefox version",
"last 3 safari version"
],
"production": [
">0.02%",
"not dead",
"not op_mini all"
]
}
在css中編輯
h{
display: flex;
transform:rotate(10deg)
}
編譯后
h{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
transform:rotate(10deg)
}
css壓縮
安裝：npm i css-minimizer-webpack-plugin -D
webpack.config頭部引入
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
plugins: 中添加
new CssMinimizerPlugin()
html壓縮
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
// 壓縮html代碼
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注釋
removeComments: true
}
})
],
更多配置看官方文檔：https://github.com/jantimon/html-webpack-plugin#options
js壓縮
只需要講mode模式調(diào)整成production模式
如：mode: "production"
js語法檢查
執(zhí)行：npm i eslint eslint-webpack-plugin -D
https://webpack.docschina.org/plugins/eslint-webpack-plugin/#fix
webpack.config引入
const ESLintPlugin = require("eslint-webpack-plugin");
plugins中配置
new ESLintPlugin({
extensions: ["js"],
//context: resolve("src"),
exclude: "/node_modules",
// 自動修復eslint的錯誤
fix: true
})
其檢查規(guī)范配置借鑒大眾認可的，airbnb插件
運行：npm i eslint-config-airbnb-base eslint-plugin-import -D
airbnb-base：https://www.npmjs.com/package/eslint-config-airbnb-base
然后再package.json中配置：
"eslintConfig":{
"extends":"airbnb-base"证薇，
"env": {
"browser": true // 支持瀏覽器端全局變量
}
}
js兼容性處理
下載：npm i babel-loader @babel/core @babel/preset-env -D
https://webpack.docschina.org/loaders/babel-loader/
1
全部js兼容性處理：npm i @babel/polyfill -D
module中配置：
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env' ]
}
}
兼容的js?
import '@babel/polyfill'; //js文件中引入
const add = (x, y) => {
return x + y;
};
console.log(add(8, 8));
2
按需加載：npm i core-js -D
module中配置：
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加載
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪個版本瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
devtool source map構(gòu)建代碼出錯提示
https://webpack.docschina.org/configuration/devtool/#devtool
module.exports = {
//source-map,eval-source-map提示具體部位錯誤
devtool: 'eval-source-map',
}
tree shaking：去除無用代碼
https://webpack.docschina.org/guides/tree-shaking/
- 必須使用ES6模塊化 2) 開啟production環(huán)境
作用: 減少代碼體積
"sideEffects": false 所有代碼都沒有副作用都可以進行tree shaking
問題：可能會把css / @babel/polyfill （副作用）文件干掉
"sideEffects": [".css", ".less"]
如有測試console.log沒有被調(diào)用到的方法等度苔，會被去除
在package.json中配置
"sideEffects": [
"*.css"
]
clean-webpack-plugin
npm i clean-webpack-plugin -D
https://www.npmjs.com/package/clean-webpack-plugin
它的作用就是每次打包的時候，都會把 dist 目錄清空浑度，防止文件變動后寇窑，還有殘留一些老的文件，以及避免一些緩存問題
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new CleanWebpackPlugin()
]
生成文件目錄清空2
output設置箩张，同理清空
output: {
clean: true, // 在生成文件之前清空 output 目錄
},
webpack-merge合并兩個配置文件
npm i webpack-merge -D
1）創(chuàng)建webpack.base.config
2）在webpack.dist.prod.config文件中引入下面代碼
const {merge} = require("webpack-merge");
const webpackBaseConfig = require("./webpack.base.config.js");
合并
const prodConfig={...}
module.exports = merge(webpackBaseConfig,prodConfig);
