javascript - webpack打包的时候img标签中的src找不到?
本文介绍了javascript - webpack打包的时候img标签中的src找不到?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我写的路径应该没问题的:
运行后报错:
webpack配置:
let webpack = require('webpack'),
path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true',
utils = require('./utils')
var env = process.env.NODE_ENV,
cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap),
cssSourceMapProd = (env === 'production' && config.build.productionSourceMap),
useCssSourceMap = cssSourceMapDev || cssSourceMapProd;
module.exports = {
devtool: 'eval-source-map', //配置生成Source Maps,选择合适的选项
entry: {
desktop: [path.resolve(__dirname, '../src/main.js'), hotMiddlewareScript],
},
output: {
path: path.resolve(__dirname, '../dist'), //打包后的文件存放的地方
publicPath: '/',
filename: '[name].js'
},
resolve: {
extensions: ['', '.js'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'scss': path.resolve(__dirname, '../src/scss')
}
},
module: { //在配置文件里添加JSON loader
loaders: [{
test: /\.json$/,
loader: "json"
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}, {
test: /\.css$/,
loader: 'style!css!postcss' //添加对样式表的处理
}, {
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url?limit=10000&name=images/[name].[ext]'
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url?limit=10000&name=images/[name].[ext]'
}]
},
sassLoader: {
includePaths: [path.resolve(__dirname, "./some-folder")]
},
postcss: [
require('autoprefixer') //调用autoprefixer插件
],
plugins: [
new webpack.BannerPlugin("Copyright B1anker."), //在这个数组中new一个就可以了
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
//渲染输出html文件名,路径相对于 output.path 的值
filename: './index.html',
//渲染源模版文件
template: path.resolve(__dirname, '../src/views/index.html'),
//这个东西非常重要,true: 自动写入依赖文件; false: 不写入依赖,构建多页面非常有用
inject: true
})
],
devServer: {
contentBase: "./dist", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true //实时刷新
}
}
如何处理呢?
解决方案
用html-withimg-loader
new HtmlWebpackPlugin({
template: 'html-withimg-loader!' + path.resolve(srcDir, filename),
filename: filename
}),
https://github.com/wzsxyz/htm...
这篇关于javascript - webpack打包的时候img标签中的src找不到?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文