前言：webpack（很難，沒有一定的vue基礎，勿學）
一，定義：js模塊打包器把所有依賴的檔案生成一個圖，打包成檔案
二，安裝：
1.npm init -y初始化專案
2.npm i webpack webpack-cli -D安裝
三，組態檔webpack.config.js module.exports = {}
四，核心概念
1.入口 entry
2.出口output：(path 檔案地址，path:__dirname+"/dist"；檔案名 filename)，
3.plugin：在webpack 的運行程序中(運行程序（生命周期）)做一些額外操作處理模板，清理，
4.loader：加載器webpack默認只能夠處理js檔案，loader把非js檔案轉換為webpack可以處理的模塊，
5.模式mode：production 產品、development開發
6.本地服務器：`dev Server
npm i webpack-dev-server -D
devServer:{
open:true,//自動打開瀏覽器
host:“localhost”,域名
port:8080 埠號
hot:true 熱更新
}`
五，loader
1：css-loader 處理css檔案
2：style-loader把css插入到header
3：less-loader處理.less
4：MiniCssExtractPlugin.loader壓縮抽出css-loader
5：file-loader處理檔案，圖片
6：url-loader當檔案比較小轉成base64減少一http請求）
7：image-webpack圖片壓縮
六，優化
1：css優化壓縮css-minimizer-webpack-plugin
2：圖片優化mage-webapck壓縮圖片、file-loader，base64格式
3：js優化壓縮terser-webpack-plugin
optimization: {
minimizer: [
new CssMinimizerPlugin(),
new TerserWebpackPlugin(),]},
4：devtool與sourceMap
5：異步加載 import(xxx).then()
6：預加載import(/* webpackPrefetch: true */ 'jquery')
7：hash命名 --01：hash ;02--chunkhash如果入口發生變化就會發生變化；03--contenthash如果內容發生變化名稱發生變化
8：tree shaking搖樹
9：按需匯入js借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小專案體積的目的，
10：splitChunks代碼分包
optimization: {
splitChunks: {
chunks: "all",
// 所有的 chunks 代碼公共的部分分離出來成為一個單獨的檔案}},
11：別名resolve: {
alias: {
'@': path.resolve(__dirname, './src'), //設定@為src目錄的別名
}},
12：靜態目錄
new CopyWebpackPlugin( // 設定靜態目錄（拷貝檔案到另外一個檔案夾）
{patterns:[
// { from: __dirname+'/public', to: __dirname+'/dist' },
//from 從， to 到 __dirname 當前目錄
{ from: __dirname+'/src/static', to: __dirname+'/dist/static' },
], }),
七，多入口打包
entry: {
vue: './src/main.js',
base: './src/index.js'
},
new HtmlWebpackPlugin({
// 指定模板檔案
filename: 'index.html',
template: './public/index.html',
chunks: ['vue'], //指定vue入口打包進來
}),
new HtmlWebpackPlugin({
filename: 'base.html',
template: './public/base.html',
chunks:['base'], //指定base入口打包
}),
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/397385.html
標籤：其他