目錄結構

before

after

更改打包命令

package.json
就可以使用npm run build 代替webpack

"scripts": {"server": "webpack-dev-server","build": "webpack"},

修改index.html

<div><img src="./images/bb.png" alt=""></div>

html-withimg-loader

安裝依賴

可以直接安裝在dev環境

cnpm install html-withimg-loader --save-dev

修改url-loader

增加outputPath:'images/',

{test:/\.(png|jpg|gif)/ ,use:[{loader:'url-loader',options:{limit:5000,outputPath:'images/',}}]}

配置html-withimg-loader loader

{test: /\.(htm|html)$/i,use:[ 'html-withimg-loader'] }

全部代碼

const path = require('path'); const uglify = require('uglifyjs-webpack-plugin'); const htmlPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); var website ={publicPath:"http://192.168.1.9:1717/" } module.exports = {// 入口 entry: {entry: './src/entry.js',},// 出口output: {//絕對路徑path: path.resolve(__dirname, 'dist'),filename: '[name].js',publicPath:website.publicPath},// 模塊module: {//規則rules: [{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})},{test: /\.(png|jpg|gif)/,use: [{loader: 'url-loader',options: {limit: 5000,outputPath:'images/',}}]},{test: /\.(htm|html)$/i,use:[ 'html-withimg-loader'] }]},//插件plugins: [// new uglify()new htmlPlugin({minify: {removeAttributeQuotes: true},hash: true,template: './src/index.html'}),new ExtractTextPlugin("css/index.css"),],//開發服務devServer: {contentBase: path.resolve(__dirname, 'dist'),host: '192.168.1.9',compress: true, //服務端是否啟用壓縮port: 1717} }

運行閱覽

npm run build npm run server

總結

以上是生活随笔為你收集整理的webpack--插件配置：处理HTML中的图片(七)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。