使用 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') %>" />