webpack4配置乙個多頁面

因為專案是用glpu搭建的工作流，在轉jenkins自動發布的時候，考慮到如果需要多頁面動態打包，需要改寫glup配置（不會glup也不想學），就將專案重構為webpack4.

掃瞄專案多頁面入口

區分生產和開發環境webpck配置

指定專案打包

使用shell指令進行打包操作

如何處理不同的模組模式

修改html如何觸發熱更新

熱更新的原理

區分生產和開發環境的懶載入

引入glob第三方外掛程式（大佬說fs模組自帶掃瞄，表示懵逼沒找到）,

//獲得乙個動態的目錄
const glob = require('glob')
const path = require('path')
const htmlwebpackplugin = require('html-webpack-plugin');
//import glob from "glob"
var obj = ,
entry: 
}const htmlwebpackplugindevconfig = 
//$用來區別專案
glob.sync(`./src/$/**/*.html`).foreach(e => 
const chunk = arr[arr.length - 1].split('.')[0]
const filename = chunk + '.html'
//這個是入口的詳細情況，以後會用到
obj['detail'][chunk] = `)
}//entry是暴露出去的入口檔案
obj['entry'][chunk] = `$` + '/main.js'
const htmlconf = 
//新建htmlwebpackplugindevconfig物件，輸出html檔案
htmlwebpackplugindevconfig.plugins.push(new htmlwebpackplugin(htmlconf))
})module.exports = 
複製**

將公共配置抽離出來成為webpack.common.js


const util = require('./util')//用來獲得entry和htmlwebpackplugindevconfig
const path = require('path');
const cleanwebpackplugin = require('clean-webpack-plugin');
const extracttextplugin = require('extract-text-webpack-plugin');
const copywebpackplugin = require('copy-webpack-plugin')
module.exports = `],
),...util.htmlwebpackplugindevconfig.plugins,
new copywebpackplugin([/static`)
}]),
],module: ,, ]
}),},,]
}]
},output: `),
filename: 'js/[name].bundle[hash].js',
chunkfilename: 'help.bundle.js',
}};複製**

引入webpack-merge進行配置合併（類似於object.assign）以dev為例，於pro相比，取消了**壓縮，增加了開發伺服器和熱更新


const path = require('path');
const webpack = require('webpack');
const copywebpackplugin = require('copy-webpack-plugin')
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, `,
hot: true
},plugins: [
new webpack.namedmodulesplugin(),//以便更容易檢視要修補(patch)的依賴
new webpack.hotmodulereplacementplugin(),
new copywebpackplugin([/static`)
}])],
optimization: ,
module: }},
]},
});複製**

引入cross-env（這個包是能夠跨平台引入全域性物件的包，可在webpack配置和開發**中引用，我很喜歡這個外掛程式）例如在package.json中的進行env_file進行寫死賦值（後期是通過shell命令動態賦值）

然後就可以在任何乙個地方使用process.env.env_file引用該變數

//獲得乙個動態的目錄
const glob = require('glob')
const path = require('path')
const htmlwebpackplugin = require('html-webpack-plugin');
//import glob from "glob"
var obj = ,
entry: 
}const htmlwebpackplugindevconfig = 
glob.sync(`./src/$/**/*.html`).foreach(e => 
const chunk = arr[arr.length - 1].split('.')[0]
const filename = chunk + '.html'
obj['detail'][chunk] = `)
}obj['entry'][chunk] = `$` + '/main.js'
const htmlconf = 
htmlwebpackplugindevconfig.plugins.push(new htmlwebpackplugin(htmlconf))
})module.exports = 
複製**

專案需要上jenkins自動發布，因此打包指令碼要改為動態打包


dir=$(ls -l ./src |awk '/^d/ ')
cur_date="`date +%y%m%d`"
for i in
$dir
donpx cross-env env_file=$ webpack --config ./build/webpack.pro.js 
echo
"打包的資料夾是: $i"
done
cd dist
tar -zcvf ../sparrow_$.tar.gz ./*
echo
"打包完畢"
"複製**

使用shell獲得資料夾目錄，使用for迴圈動態執行webpack命令，其中npx是npm(5.2以上)自帶的乙個包，可用來執行本地指令（與package中scripts類似的作用），這裡有對 cross-env進行動態賦值的操作

原先專案使用的是src引入的第三方依賴，會將變數暴露在window下而模組化本地打包之後，會通過require暴露乙個物件需要手動在全域性註冊一下。

手動寫乙個inject-loader，在dev環境下使用該loader，在pro就不用了

}},
,]
}複製**

//inject-loader
const path = require("path");
module.exports = function (source) .html");
};` + source;
}return source
}複製**

這裡我也迷了很久，後來才知道大致和dom事件差不多，都是採用的冒泡形式，自變更的那個檔案，冒泡到引用該檔案的最上層，vue-loader，css-loader都有對其變化進行攔截，關鍵點在module.hot.accept這個函式,一般不會出現在業務**中，會出現在loader原始碼中。推薦乙個大佬的github進行尾隨學習

開發環境，不需要有懶載入，懶載入只在生產上面用

//.babelrc
}}複製**

dynamic-import-node這個外掛程式是用來將import()轉化為require()，在生產環境用**分割，在開發環境使用同步引入，可以加快熱更新的速度

usebuiltins這個option可以在入口處引入babel-polyfill之後進行按需補丁

targets可以選擇編譯後的版本型別

更多env配置可檢視

啊~雖然學的很累，但是不會說學不動了，大佬是燈塔，就算我看不見，也有人會需要

demo倉庫

webpack4配置乙個多頁面

webpack4配置詳解

優化webpack4配置，加快頁面訪問時間

學習webpack4 基礎配置

webpack4配置乙個多頁面

webpack4配置詳解

優化webpack4配置，加快頁面訪問時間

學習webpack4 基礎配置

相關推薦