(一)項目開發完上線,path路徑都會換成cdn的域名前綴,這個時候就要使用publicPath了
在output輸出的時候配置:以域名 static.test.cn 爲例:在多頁面的基礎上修改
module.exports = {
entry: entry,
output: {
filename: 'js/[name].[chunkhash].js',
path: path.join(__dirname, 'dist'),
publicPath: 'static.test.cn'
},
plugins: htmlArr
}
然後npm run build打包:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack test</title>
</head>
<body>
<div class="title">title</div>
<script src="https://static.test.cn/js/index.3c41b90c038ca77d14ee.js"></script>
</body>
</html>
可以看到 script 引入的js就是publicPath前綴域名的了!!滿足上線需求
現在線上部署都是使用publicPath
path: 是指把輸出的文件放在本地的某個目錄下
publicPath: 相當於一個佔位符,如果設置了PublicPath,在html中引入的文件就會變成以publicPath開頭的路徑
(二)再來個html壓縮配置 (minify)
minify是一個對象,裏面可以進行配置
new htmlWebpackPlugin({
template: config.pages[key].template,
filename: `${key}.[chunkhash].html`,
chunks: [`${key}`],
inject: 'true',
minify: {
removeComments: true, // 刪除註釋
collapseWhitespace: true // 刪除空格
}
}) // 初始化
其他配置參照官方文檔~