Question

我正在尝试使用webpack对现有项目添加反应。

之后

npm i react --save

我添加了

import React from 'react';
import ReactDOM from 'react-dom';

包含所有导入的webpack app.js

但是当我跑步

npm run build

我遇到错误

./Project.Web/webpack/app.js中的错误

Module not found: Error: Can't resolve 'react' in 'C:\source\Project.Web\webpack'
 @ ./Project.Web/webpack/app.js 330:0-26

所以我想一个原因可能是在webpack配置中在项目中有webpack.common.config.js。我是webpack的新手，但令我惊讶的是，没有对node_modules的引用。那么应该如何？

var path = require("path");
var webpack = require("webpack");

module.exports = {
    resolve: {
        alias: {
            React: path.resolve(__dirname, '../node_modules')
            jquery: path.resolve(__dirname, '../Project.Web/SharedComponents/Components/jquery/jquery-1.11.3'),
            d3: path.resolve(__dirname, "../Project.WebU/SharedComponents/Components/d3/d3.js"),
            d3Tip: path.resolve(__dirname, "../Project.Web/SharedComponents/Components/d3/d3.tip.v0.6.3.js"),
            underscore: path.resolve(__dirname, "../Project.Web/SharedComponents/Components/underscore/underscore.js"),
            hb: path.resolve(__dirname, "../Project.Web/SharedComponents/Components/handlebars/handlebars-v4.0.11.js"),
        },
        modules: [
            path.resolve(__dirname, "../Project.Web"),
            path.resolve(__dirname, "../Project.Web/SharedComponents"),
            path.resolve(__dirname, "./")
        ],
        extensions: ['.js']
    },

    module: {
        rules: [{
                test: require.resolve('../Project.Web/SharedComponents/Components/jquery/jquery-1.11.3'),
                use: [{
                        loader: 'expose-loader',
                        options: '$'
                    },
                    {
                        loader: 'expose-loader',
                        options: 'jQuery'
                    }
                ]
            },
            {
                test: require.resolve("../Project.Web/SharedComponents/Components/d3/d3.js"),
                use: [{
                    loader: 'expose-loader',
                    options: 'd3'
                }]
            }
        ]
    },


    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jquery",
            jQuery: "jquery",
            "window.jquery": "jquery",
            "window.jQuery": "jquery",
            "window.$": "jquery",
            "d3": "d3",
            "d3.tip": "d3Tip",
            "_": "underscore",
            "Handlebars": "hb",
            "PubSub": "PubSub",
            "bootbox": "bootbox",
            "Mprogress": "Mprogress",
            "zxcvbn": "zxcvbn",

        })
    ]
};

Answer 1

您可以使用此webpack设置来响应我的github中的内容： https://github.com/behnamshateri/webpack-setup-for-react

Answer 2

通过导入方式，您做错了。您应该将它们导入react组件中。

类似这样的东西

import React from "react";

const Spinner = () => {
  return (
    <div style={styles.div}>
      <img src="/img/loader.svg" style={styles.spinnerStyle} />
    </div>
  );
};

const styles = {
  div: {
    display: "flex",
    alignItems: "center"
  },
  spinnerStyle: {
    margin: "0 auto"
  }
};

export default Spinner;

webpack.config.js文件仅包含配置设置，而不包含您导入库模块的文件

找不到模块：错误：无法解决“反应”

2 个答案: