webpack resolve 编译通过，但是浏览器报错

Question

我是 webpack 的新手，我尝试使用 resolve 这样我就不必输入 .js 或 .jsx 但我一直收到错误。一切编译正常，但我在浏览器上收到错误。

这段之后的webpack文件

我为我的 webpack.config 添加了决心，一切都很好。 Webpack 已编译，一切都很顺利，直到我加载浏览器，如果我在浏览器中没有这一行，我会得到同样的错误。我可以取出 resolve 语句并在我的终端上得到同样的错误。

要点是这样的：

在我的模块中导入

import AppBar from './components/AppBar';

我的解析语句

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

这给出了以下错误：

ERROR in ./app/main.jsx
Module not found: Error: Can't resolve './components/AppBar' in 
'/Users/auser/dev/project/app'

这是我的全部 webpack.config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './app/index.jsx'
  },
  devtool: 'source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module:{
    rules: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            query: {
              // If you set something here, also set it in .babelrc
              presets: ['es2016', 'react'],
              plugins: ['transform-class-properties']
          }
        }
      }
    ]
},
plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Hot Module Replacement',
      template: './app/index-template.html'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
],
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

目录结构：

├── Makefile
├── app
│   ├── components
│   │   ├── AppBar.jsx
│   │   ├── Content.jsx
│   │   ├── SideBar.jsx
│   │   └── Table.jsx
│   ├── index-template.html
│   ├── index.jsx
│   ├── main.jsx
│   ├── print.js
│   └── utils
│       └── data-formatter.js
├── config.pyc
├── dist
│   ├── app.bundle.js
│   ├── app.bundle.js.map
│   └── index.html
├── npm-debug.log
├── package.json
└── webpack.config.js

Answer 1

您的 webpack 配置或您发布的配置有误（格式错误）。 babel-loader 的模块应该是一个带有数组的对象，我看不到你的从哪里开始:(，可能是语法错误。正确的格式应该是这样的：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './app/index.jsx'
  },
  devtool: 'source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module:{
    rules:[
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
              // If you set something here, also set it in .babelrc
              presets: ['es2016', 'react'],
              plugins: ['transform-class-properties']
          }
        }
      }
    ]
}, ......
The rest goes below here

Link 如果您需要更多帮助，请查看文档 https://github.com/babel/babel-loader

webpack resolve 编译通过，但是浏览器报错

Webpack resolve compiles, but errors in the browser

javascript

build

web-deployment

webpack