基於webpack實現多html頁面開發框架三 圖片等文件路徑替換、並輸出到打包目錄

一、解決什麼問題

     1、圖片路徑替換、並輸出到打包目錄

     2、輸出目錄清理

二、需要安裝的包

　　file-loader：html、css中圖片路徑替換，圖片輸出到打包目錄；命令：npm install --save-dev file-loader

　　url-loader： 在文件大小（單位 byte）低於指定的限制時，可以返回一個 DataURL，其依賴於file-loader；命令：npm install --save-dev url-loader

　　clean-webpack-plugin：清理打包目錄插件，根據output指定目錄清理；命令： npm install clean-webpack-plugin --save-dev

三、webpack.config.js新增配置

　　url-loader配置如下：

 1  {
 2                 test: /\.(png|svg|jpg|gif|jpeg)$/,
 3                 use: [
 4                     {
 5                         loader: 'url-loader',
 6                         options: {
 7                             limit: 8192,    //小於這個數時，會轉成DataURL
 8                             name:'assets/img/[name].[hash:9].[ext]',//輸出到文件夾,基於output根目錄
 9                         }
10                     }
11                 ]
12             }

　　文件清理插件配置：首先在頭部引入 const { CleanWebpackPlugin } = require("clean-webpack-plugin")，在plugins進行配置，配置如下：

1         // 刪除文件 保留新文件
2         new CleanWebpackPlugin(),

四、測試

　　1、在home中index.html引入圖片

　　2、在home中的index.scss中引入圖片

　　3、運行npm run build查看效果

五、效果如下圖

　　

 

 

注意：new CleanWebpackPlugin()要做爲第一個插件，放到末尾在dist中會報找不到文件

 

源碼地址：https://github.com/James-14/webpack4_multi_page_demo

寫的不對之處請大家批評指正~~~~!!!!!! 

 

文章原創，轉載請註明出處，謝謝！