打包后img中src值的问题

siguang1983 commented 4 years ago

html中 img src="images/img.jpg" alt="" 编译后结果 img src="{"default":"images/cceba3bc9c3a59cc3e8fffa8959907f1.jpg"}" alt=""

1、使用版本0.1.16 2、wepcck.config.js配置 module:{ rules: [ { test: /.(htm|html)$/i, loader: 'html-withimg-loader' } ] }

siguang1983 commented 4 years ago

webpack.config.js

const webpack = require('webpack') const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') const basePath = path.resolve(dirname, 'src'); const buildPath = path.resolve(dirname, 'build');

module.exports = { entry: { index: path.resolve(basePath, 'js/index.js'), list: path.resolve(basePath, 'js/list.js'), },

output: { filename: '[name].js', path: buildPath },

module: { rules: [ { test: /.js$/, use:{ loader: "babel-loader", options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-class-properties'] }, }, exclude: /node_modules/, }, { test: /.js$/, use: { loader: "eslint-loader", options: { enforce: 'pre' } }, exclude: /node_modules/, },

  // 处理css文件
  {
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '',
          hmr: process.env.NODE_ENV === 'development',
        },
      },
      'css-loader',
      'postcss-loader',
    ]
  },
  {    
    test:/\.(jpg|png|svg|gif)/,    
    use:[{      
      loader:'file-loader',      
      options:{        
        outputPath: './images/',
      }
    }]
  },
  {
    test: /\.(htm|html)$/i,
    loader: 'html-withimg-loader'
  },
]

},

plugins: [ new CleanWebpackPlugin(), new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ title: '首页', template: ${basePath}/index.html, filename: index.html }), new HtmlWebpackPlugin({ title: '列表页', template: ${basePath}/list.html, filename: list.html }), new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css', }), new webpack.ProvidePlugin({ '$': "jquery", '@': basePath }) ],

optimization: { minimizer: [ new UglifyJsPlugin({ sourceMap: true, }), new optimizeCssAssetsWebpackPlugin() ] },

devServer: { port: 3000,
contentBase: './build', hot: true,
// open: true, inline: true, compress: true, progress: true,
proxy: { '/api/*': { target: 'http://wwww.we.com', pathRewrite: { '^/api/': '/' }, changeOrigin: true, secure: false } }, historyApiFallback:{ rewrites:[ { from: /./, to: '404.html' } ] } } }

ifer-itcast commented 3 years ago

添加 esModule: false 即可，如下

rules: [
    {
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        // 小于等于 limit 大小的图片会被转为 base64
        use: [{
            loader: 'url-loader?limit=272359',
            options: {
                esModule: false
            }
        }],
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
    },
]

wzsxyz / html-withimg-loader

打包后img中src值的问题 #23