webpack 之 publicPath

(一)項目開發完上線,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 // 刪除空格
      }
    }) // 初始化

其他配置參照官方文檔~

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章