?npm run build 也可以打包 如果沒有特殊需求 可以使用 效果其實(shí)是差不多的
---------------------------------------------------------------------------------------------------------------------------------
webpack網(wǎng)址 ：?起步 | webpack 中文文檔 (docschina.org)
報(bào)錯(cuò)? ??跟著安裝報(bào)錯(cuò)? 后來查了才知道? 是因?yàn)?webpack 版本有問題 安裝的時(shí)候看好
webpack的版本過高? 產(chǎn)生的錯(cuò)誤 需要卸掉從新安裝webpack -v? 查看 版本號(hào)
---------------------------------------------------------------------------------------------------------------------------?
正式開始
第一步，開始復(fù)雜的安裝過程
安裝 安裝報(bào)錯(cuò)的話可以把后邊的 --save-dev 刪掉
npm install webpack webpack-cli --save-dev //安裝
npm install css-loader style-loader –save-dev //css
npm install file-loader –save-dev //loader
npm install html-webpack-plugin --save-dev //plugin
npm i less less-loader -D //less
npm install sass-loader -D //sass
npm i url-loader file-loader -D //圖片
在黑窗口中執(zhí)行 命令，查看webapck版本
npm webpack -v
卸載
刪除局部webpack-cli
npm uninstall webpack-cli
刪除全局webpack
npm uninstall -g webpack
刪除本地wbpack
npm uninstall webpack
按你需要的安裝?
第二步 。需要單獨(dú)創(chuàng)建?webpack.config.js 在文件進(jìn)行配置打包的東西（部分）
const path = require('path');
console.log(path.resolve(__dirname, 'dist')) // e:\big ---project\Webpack project\test01\dist
const HTMLPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development", //模式： "production" | "development" | "none"
entry: './src/index.js', //入口
output: { // 輸出
filename: 'main.js', // 打包后的文件名字
//filename: 'main.[hash].js', // 打包后的文件名字變成帶有哈希值
//filename: 'main.[hash:8].js', // 文件的哈希值只顯示8位
path: path.resolve(__dirname, 'dist') // 路徑必須是一個(gè)絕對(duì)路徑, --dirname：是使用當(dāng)前目錄出生成一個(gè)dist文件夾
},
devServer: { // 開發(fā)服務(wù)配置
port: 3000,
progress: true, // 是否顯示加載進(jìn)度條
contentBase: './dist', // 映射地址
compress: true // 是否壓縮
},
plugins: [ // 附加插件
new HTMLPlugin({ // 打包html文件
template: './src/index.html', // 模板文件
filename: 'index.html', // 打包出來的文件名
minify: {
removeAttributeQuotes: true, // 刪除html頁面的雙引號(hào)
collapseWhitespace: true, // 將html頁面壓縮成一行
},
hash: true // 將文件打包成哈希包
}),
new MiniCssExtractPlugin({ // 打包c(diǎn)ss文件
filename: "index.css" // 抽離出來的文件名字
})
],
module: { // 模塊配置
rules: [ //規(guī)則
/* css-loader 解析 @import這種語法
style-loader 它是將css插入到head的標(biāo)簽中
loader的執(zhí)行順序是從右向左執(zhí)行
*/
{ // 解析 css文件
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
// 圖片
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: 'asset', //小于8k打包成base64,小圖打包進(jìn)js里,可以 減少http請(qǐng)求次數(shù) 但是轉(zhuǎn)成base64字符串會(huì)讓體積增大20%-30% 所以大于8k還是直接打包進(jìn)靜態(tài)資源目錄中
generator: {
filename: 'assets/[hash][ext][query]'
}
},
{ // 解析 less文件
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
'postcss-loader'
]
},
{ // 解析 scss文件
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
"scss-loader",
'postcss-loader'
]
}
]
}
};
第三步 ，如果是統(tǒng)一文件入口? 那就需要?jiǎng)?chuàng)建一個(gè) js文件? ?
例如? index.js文件存放代碼 把要打包的都引進(jìn)來?
無論是css? js? 還是html都得是單獨(dú)的文件? 不然 無法進(jìn)行打包
(1) 先創(chuàng)建一個(gè) b.js 和 c.js文件? 把他倆引進(jìn)? index.js文件?
例如 ?b.js 和 c.js文件?
??例如 ?b.js 和 c.js文件? 把他倆引進(jìn)? index.js文件?
??例如 webpack.config.js? ?部署打包機(jī)制
運(yùn)行 webpack -w? ?就可以在dist 查看打包成果?
--------------------------------------------------------------------------------------------------------------------------------
(2.1)? less轉(zhuǎn)換成css?
例如 創(chuàng)建一個(gè)less的文件寫樣式? 然后運(yùn)行就會(huì)得到一個(gè)同步css? webpack內(nèi)容和上邊的一樣
不需要其他的引入之類的?
// 基于commonjs規(guī)范定義配置
module.exports = {
// 指定環(huán)境
mode: 'development',
// 入口
entry: './src/index.js',
// 出口
output: {
// 指定發(fā)布的文件名稱
filename: './main.js'
},
// 配置module屬性
module: {
// 通過rules定義加載機(jī)的規(guī)則
rules:[
{
test:/\.css$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: 'asset', //小于8k打包成base64,小圖打包進(jìn)js里,可以 減少http請(qǐng)求次數(shù) 但是轉(zhuǎn)成base64字符串會(huì)讓體積增大20%-30% 所以大于8k還是直接打包進(jìn)靜態(tài)資源目錄中
generator: {
filename: 'assets/[hash][ext][query]'
}
}
]
}
}
const path = require('path');
console.log(path.resolve(__dirname, 'dist')) // e:\big ---project\Webpack project\test01\dist
const HTMLPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development", //模式： "production" | "development" | "none"
entry: './src/index.js', //入口
output: { // 輸出
filename: 'main.js', // 打包后的文件名字
//filename: 'main.[hash].js', // 打包后的文件名字變成帶有哈希值
//filename: 'main.[hash:8].js', // 文件的哈希值只顯示8位
path: path.resolve(__dirname, 'dist') // 路徑必須是一個(gè)絕對(duì)路徑, --dirname：是使用當(dāng)前目錄出生成一個(gè)dist文件夾
},
devServer: { // 開發(fā)服務(wù)配置
port: 3000,
progress: true, // 是否顯示加載進(jìn)度條
contentBase: './dist', // 映射地址
compress: true // 是否壓縮
},
plugins: [ // 附加插件
new HTMLPlugin({ // 打包html文件
template: './src/index.html', // 模板文件
filename: 'index.html', // 打包出來的文件名
minify: {
removeAttributeQuotes: true, // 刪除html頁面的雙引號(hào)
collapseWhitespace: true, // 將html頁面壓縮成一行
},
hash: true // 將文件打包成哈希包
}),
new MiniCssExtractPlugin({ // 打包c(diǎn)ss文件
filename: "index.css" // 抽離出來的文件名字
})
],
module: { // 模塊配置
rules: [ //規(guī)則
/* css-loader 解析 @import這種語法
style-loader 它是將css插入到head的標(biāo)簽中
loader的執(zhí)行順序是從右向左執(zhí)行
*/
{ // 解析 css文件
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
// 圖片
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: 'asset', //小于8k打包成base64,小圖打包進(jìn)js里,可以 減少http請(qǐng)求次數(shù) 但是轉(zhuǎn)成base64字符串會(huì)讓體積增大20%-30% 所以大于8k還是直接打包進(jìn)靜態(tài)資源目錄中
generator: {
filename: 'assets/[hash][ext][query]'
}
},
{ // 解析 less文件
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
'postcss-loader'
]
},
{ // 解析 scss文件
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
"scss-loader",
'postcss-loader'
]
}
]
}
};
(2.2)? sass轉(zhuǎn)換成css?
例如 創(chuàng)建一個(gè)scss的文件寫樣式? 然后運(yùn)行就會(huì)得到一個(gè)同步css? webpack內(nèi)容和上邊的一樣
不需要其他的引入之類的?
報(bào)錯(cuò)? 因?yàn)槲野?后綴scss? 寫成了 sass
--------------------------------------------------------------------------------------------------------------------------------
(3)? css?
例如 在index.js （入口文件）引入css文件?
例如 創(chuàng)建一個(gè)css的文件寫樣式? 創(chuàng)建html 引入打包后的js創(chuàng)建div包裹c(diǎn)lass?webpack內(nèi)容同上?
運(yùn)行html文件 可以看見看見整體代碼展示效果
?
--------------------------------------------------------------------------------------------------------------------------------
(4)? 圖片
?例如 在index.js （入口文件）引入圖片文件??看一下安裝沒有url? 運(yùn)行打包成功
引入?
// 引入圖片
let img_url = require('./assets/logo.png');
let img2_url = require('./assets/QQ截圖20230904182803.jpg');
// 創(chuàng)建圖片元素
let img = new Image();
let img2 = new Image();
// 設(shè)置圖片的路徑
img.src = img_url; //打包顯示
img2.src = img2_url.default; //打包不顯示
// 上樹
document.body.appendChild(img);
document.body.appendChild(img2);??webpack.config.js
// 基于commonjs規(guī)范定義配置
module.exports = {
// 指定環(huán)境
mode: 'development',
// 入口
entry: './src/index.js',
// 出口
output: {
// 指定發(fā)布的文件名稱
filename: './main.js'
},
// 配置module屬性
module: {
// 通過rules定義加載機(jī)的規(guī)則
rules:[
{
test:/\.css$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: 'asset', //小于8k打包成base64,小圖打包進(jìn)js里,可以 減少http請(qǐng)求次數(shù) 但是轉(zhuǎn)成base64字符串會(huì)讓體積增大20%-30% 所以大于8k還是直接打包進(jìn)靜態(tài)資源目錄中
generator: {
filename: 'assets/[hash][ext][query]'
}
}
]
}
}
第四步 。使用打包指令 webapck -w 可以進(jìn)行隨時(shí)隨地打包? 不需要每次都進(jìn)行 單獨(dú)打包 你每次保存 下邊都會(huì)有變化 就是正常運(yùn)行了??
在dist查看打包的數(shù)據(jù)?
參考：?
Webpack的使用方法_webpack 命令_ID月光傾城的博客-CSDN博客文章來源：http://www.zghlxwxcb.cn/news/detail-705514.html
webpack打包全流程_webpack打包的整個(gè)過程_理想今年妳幾歲的博客-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-705514.html
到了這里，關(guān)于vue3 webpack打包流程及安裝 （1）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
