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

Question

I have been tasked by fixing the Webpack build in a project I work on. I'm no Webpack expert and am struggling somewhat to make this work. The project has a untraditional react frontend with typescript. I have been trying to create this webpack.common.js/dev.js/prod.js setup. But nothing seems to work. Since I have the entry set in webpack.common.js I would assume that the entry would be set, but Webpack still tries to find it as src/index.js. Here is my 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")
    }
});

I have been using Webpack guide for production setup in combination with trying to use different parts of the configuration of the old setup. My scripts from package.json:

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

when I run the the build script i get:

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 version : 4.39.2. If I move common setup from Webpack.Common to Webpack.prod the entry is recognized but it crashes because none of the modules being imported in the entry files are found. I don't now why this happens since the project is building fine with the old setup.

Answer 1

Solved this issue, problem here was that I pasted the wrong code for webpack.common.js. Actually pasted the content for a version of webpack.prod.js as I was trying to debug the issue. in the original webpack.common.js I had modules.export instead of module.exports. I was also missing resovle argument:

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