javascript - 使用 webpack 处理图像的想法

Question

这是我当前的项目设置:

dist/
├── bundle.js
└── index.html
src/
├── main.js
├── img/
│    └── icon.svg
├── js/
└── styles/
     └── page.css
webpack.config.js

当我想引用 index.html 文件内的图像

<img src="img/icon.svg">

当我现在想要使用时，我首先需要在我的 main.js 文件中需要它，以便在这个 dist/img/ 目录中进行处理和构建我的 css 中的图标也出现引用问题。希望您能给我一些关于如何优化我的设置的建议。

const path = require('path');

const excludeDirectorys = path.resolve(__dirname, 'node_modules');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      // => JS Loader
      { test: /\.js$/,include: path.resolve(__dirname, 'src'), exclude: excludeDirectorys, loader: 'babel-loader', query: { presets: ['es2015']} },
      // => CSS Loader
      { test: /\.css$/, exclude: excludeDirectorys, loaders: ['style-loader', 'css-loader', 'autoprefixer-loader'] },
      // => SASS Loader
      { test: /\.(sass|scss)$/, exclude: excludeDirectorys, loaders: ['style-loader', 'css-loader', 'autoprefixer-loader', 'sass-loader'] },
      // => Image Loader
      { test: /\.(jpe?g|png|gif|svg)$/i, exclude: excludeDirectorys, loaders: ['file-loader?name=./img/[name].[ext]', 'image-webpack?'] }
    ]
  },
};

Answer 1

如果您有顶级静态 HTML 文件，我会使用 html-webpack-plugin，它可以让您执行以下操作:

<img src="<%= require('../path/to/icon.svg') %>" />