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

使用webpack处理图像的想法

1 个答案: