这是我当前的项目设置：
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?'] }
]
},
};
如果您有顶级静态HTML文件，则可以使用html-webpack-plugin，它可以让您执行以下操作：
<img src="<%= require('../path/to/icon.svg') %>" />
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句