webpack打包配置常见问题

1、html中的图片引用不起作用
安装html-loader插件；在打包配置中加入下方代码；注意如果对图片添加了url-loader则不需要再添加file-loader的处理；经测试file-loader和url-loader与html-loader一起使用时图片出不来，只保留file-loader和url-loader中的一个与html-loader一起使用时没问题

{
  test: /\.html$/,
  loader: 'html-loader'
}

2、使用postcss-loader自动为样式添加前缀时，需要安装autoprefixer并配置.postcss.config.js文件：

module.exports = {
  plugins: {
    autoprefixer: {} 
  }
}

3、resolve中配置extensions错误
ERROR in ./node_modules/style-loader/lib/addStyles.js
Module not found: Error: Can't resolve './urls' in '/Users/xx/works/example/test-demo/node_modules/style-loader/lib'
@ ./node_modules/style-loader/lib/addStyles.js 67:14-31
@ ./src/style.css

该报错是因为配置项中

resolve: {
    extensions: ['js'] 
},

extensions中后缀名要加'.';即

resolve: {
    extensions: ['.js'] 
},

4、未安装less错误，下方错误是因为没有安装less
ERROR in ./src/css/style.less
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):
Error: Cannot find module 'less'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (/Users/xx/works/example/test-demo/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/Users/xx/works/example/test-demo/node_modules/less-loader/dist/index.js:7:13)
at Module._compile (/Users/xx/works/example/test-demo/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/Users/xx/works/example/test-demo/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/Users/xx/works/example/test-demo/node_modules/less-loader/dist/cjs.js:3:18)
at Module._compile (/Users/xx/works/example/test-demo/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/Users/xx/works/example/test-demo/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at loadLoader (/Users/xx/works/example/test-demo/node_modules/loader-runner/lib/loadLoader.js:18:17)
at iteratePitchingLoaders (/Users/xx/works/example/test-demo/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/Users/xx/works/example/test-demo/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /Users/xx/works/example/test-demo/node_modules/loader-runner/lib/LoaderRunner.js:176:18
at loadLoader (/Users/xx/works/example/test-demo/node_modules/loader-runner/lib/loadLoader.js:47:3)
at iteratePitchingLoaders (/Users/xx/works/example/test-demo/node_modules/loader-runner/lib/LoaderRunner.js:169:2)