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

如果您需要更多帮助https://github.com/babel/babel-loader

，请链接到文档

Webpack解析编译，但浏览器中出现错误

1 个答案: