webpack打包报错处理

目录

故障

解决方案

---

故障

控制台运行webpack时出现

ERROR in (webpack)-dev-server/client?http://localhost:9003
Module not found: Error: Can't resolve './overlay' in 'D:\xxx\node_modules\
webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost:9003 10:14-34
 @ multi (webpack)-dev-server/client?http://localhost:9003 ./src/index.js

ERROR in (webpack)-dev-server/client?http://localhost:9003
Module not found: Error: Can't resolve './socket' in 'D:\xxx\node_modules\
webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost:9003 8:13-32
 @ multi (webpack)-dev-server/client?http://localhost:9003 ./src/index.js

ERROR in (webpack)-dev-server/client?http://localhost:9003
Module not found: Error: Can't resolve './utils/createSocketUrl'
in 'D:\xxx\node_modules\webpack-dev-server\client'
 @ (webpack)-dev-server/client?http://localhost:9003 20:22-56
 @ multi (webpack)-dev-server/client?http://localhost:9003 ./src/index.js

ERROR in (webpack)-dev-server/client?http://localhost:9003
Module not found: Error: Can't resolve './utils/log' in 'D:\xxx\node_modules\
webpack-dev-server\client'

解决方案

     笔者在遇到这个问题时也是一脸懵逼，查了很多资料都没用，最后一行行检查配置文件才发现问题所在。先看看笔者的配置文件

devServer: {
    port: 9003,
    host: 'localhost',
    overlay: {
      error: true,
    },
    open: true,
    compress: true,
    contentBase: path.join(__dirname, './dist'),
  },
  resolve: {
    // exclude: ['node_modules'], 
    extensions: ['js', 'jsx', 'json'],
    alias: {
      '@src': path.join(__dirname, './src'),
    }
  },

配置文件中对resolve添加了extensions配置，最后查阅webpack官方文档发现，是extensions配置错误，正确配置如下：

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  }
};

是笔者疏忽，配置时忘记添加小数点，修改配置后解决上述问题。。。