为我的 React typescript 项目配置 Webpack（Webpack 版本 4.39.2）答案

【问题标题】：Configuring Webpack for my React typescript project (Webpack Version 4.39.2)为我的 React typescript 项目配置 Webpack（Webpack 版本 4.39.2）
【发布时间】：2020-04-05 03:28:15
【问题描述】：

我的任务是在我从事的项目中修复 Webpack 构建。我不是 Webpack 专家，我在努力完成这项工作。该项目有一个非传统的带有打字稿的反应前端。我一直在尝试创建这个 webpack.common.js/dev.js/prod.js 设置。但似乎没有任何效果。由于我在 webpack.common.js 中设置了条目，我假设该条目将被设置，但 Webpack 仍然尝试将其查找为 src/index.js。这是我的 webpack.dev.js：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: '../FrontEnd/dist/base'
    }
});

Webpack.prod.js：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production'
});

webpack.common.js：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const path = require('path');
const BitBarWebpackProgressPlugin = require("bitbar-webpack-progress-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',

    entry: {
        app: ["babel-polyfill", "./src/NordicBase/NKportal/portal.tsx", "core-js/fn/promise"],
        vendor: ['react', 'react-dom']
    },

    plugins: [
        new CleanWebpackPlugin(),
        new BitBarWebpackProgressPlugin(),
        new webpack.ProvidePlugin({
            'Promise': 'es6-promise',
            'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
        }),
        new HtmlWebpackPlugin({
            title: 'Production'
        })
    ],

    node: {
        fs: "empty"
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader"
            },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader?name=fonts/[name].[ext]"
            },
            {
                test: /\.css$/,
                use: [{
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                }
                ]
            },
            {
                test: /\.scss$/,
                // include: [
                //     path.resolve(__dirname, "src/css")
                // ],
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS
                ]
            },
            {
                test: /\.(png|jp(e*)g|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                    //limit: 8000, // Convert images < 8kb to base64 strings
                    name: 'images/[hash]-[name].[ext]'
                }
                }]
            } 
        ],

    },

    output: {
        filename: "[name].bundle.js",
        path: path.resolve("../FrontEnd/dist/Base")
    }
});

我一直在使用 Webpack 指南进行生产设置，并尝试使用旧设置配置的不同部分。我的 package.json 脚本：

"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"

当我运行我得到的构建脚本时：

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users.......'

Webpack 版本：4.39.2。如果我将通用设置从 Webpack.Common 移动到 Webpack.prod，则该条目会被识别，但它会崩溃，因为找不到在条目文件中导入的任何模块。我现在不明白为什么会发生这种情况，因为该项目使用旧设置构建良好。

【问题讨论】：

标签： javascript reactjs typescript webpack

【解决方案1】：

解决了这个问题，这里的问题是我为 webpack.common.js 粘贴了错误的代码。在我尝试调试问题时，实际上粘贴了 webpack.prod.js 版本的内容。在原来的 webpack.common.js 中，我有 modules.export 而不是 module.exports。我也缺少 resovle 论点：

resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json", ".css"]
    },

【讨论】：