webpack处理图片报错（vue）

报错信息：ERROR in ./src/img/timg.jpg Module build failed: Error: Cannot find module 'file-loader' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.loader (E:\hbuildWork\learnVue\02-webpack的起步\node_modules\[email protected]@url-loader\dist\index.js:65 :20) @ ./node_modules/[email protected]@css-loader/dist/cjs.js!./src/css/common.css 4:38-64 @ ./src/css/common.css @ ./src/main.js

原因：检查一下项目中(webpack.config.js)是否引用了url-loader

如果有，则需看项目中加载图片的大小是否在属性limit范围中，一般都是因为太小了。
解决方案：cnpm install --save-dev file-loader
cnpm run build,此时不会报错，但是页面还是未加载图片，是因为打包后的图片路径少了前缀，页面找不到。
在webpack.config.js中的output下加入publicPath:‘dist/’

module.exports={
	entry:'./src/main.js',
	output :{
		path:path.resolve(__dirname,'dist'),
		filename:'bundle.js',
		publicPath:'dist/'
	}
}