Question

我已经使用webpack，react，typescript等创建了Boilder Plate项目，但是每当我构建项目时，webpack都会在无法解析其他模块的入口点抛出此错误（这只是简单的Login组件）这是我的webpack的错误消息

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve './components/Login' in '/Users/myname/Desktop/Projects/front/src'
 @ ./src/index.tsx 6:14-43

这是我的index.tsx文件

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Login from './components/Login';


ReactDOM.render(
  <BrowserRouter>
    <Login />
  </BrowserRouter>,
  document.getElementById('root')
);

这是我的登录组件，Webpack无法解析

import * as React from 'react';

export default () => <div>Login</div>;

这是我的webpack配置和package.json的脚本

webpack.config.js

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

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
        options: {
          useCache: true,
          reportFiles: ['src/**/*.{ts,tsx}']
        }
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'template/index.html'
    })
  ],
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'build/'),
    filename: 'bundle.[hash].js'
  },
  plugins: [new CleanWebpackPlugin()]
};

package.json的脚本

"scripts": {
    "build": "webpack"
  },

我尝试最小化我的项目，以便您可以专注于这个单一的问题，为什么入侵我的Webpack无法解析普通的组件文件？您可以在https://github.com/sh2045/myproblem上找到这个最小化的项目您可以克隆它，然后运行

npm i 
npm run build

您会看到错误消息，请帮助：（

Answer 1

为什么不尝试使用webpack推荐的用于打字稿的加载器，而不使用table_hr_tags_per_bin <- data.frame(matrix(c("2018-11-21 12:40:35", "25"),nrow = 1,ncol = 2)) colnames(table_hr_tags_per_bin) <-c('StartTimeStamp', 'cars') plot_conf = ggplot() + geom_point(data = table_hr_tags_per_bin, aes_string(x='StartTimeStamp', y= "cars"),colour = "red", size=3) + labs(subtitle="plot_name", y="y_axis_name", x="Time", title="my mitle", caption = "") + theme(axis.text.x = element_text(angle = 80, hjust = 1)) + scale_x_datetime(date_breaks = paste0(4," sec"), label=function(x) substr(x,12,19))+ scale_y_continuous(breaks=waiver()) plot(plot_conf)

要解决您的问题，

安装此awesome-typescript-loader软件包node。这是ts到js转换的加载程序。

您需要删除npm install --save-dev typescript ts-loader，并在awesome-typescript-loader中使用ts-loader。以下是更新后的webpack.config.js。您可以使用此配置并执行webpack.config.js，并验证您的npm run build是否正确捆绑了项目

修改后的webpack.config.js

webpack

注意，当我从git下载并设置项目时，我相信const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: './src/index.tsx', module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }, { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' } ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ] }, plugins: [ new HtmlWebpackPlugin({ template: 'template/index.html' }) ], mode: 'production', output: { path: path.resolve(__dirname, 'build/'), filename: 'bundle.[hash].js' }, plugins: [new CleanWebpackPlugin()] };中缺少此软件包npm i acorn --save。所以我不得不手动安装

Webpack在我的样板项目中构建时无法解析其他模块

1 个答案: