报错信息: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/'
}
}