尝试使用babel，webpack创建React应用程序时运行webpack构建问题

Question

我正在建立一个新项目，以使用webpack和babel进行反应。以下是webpack.config.js文件

文件夹结构：

node_modules/
src/
 - api/
 - components/
 - index.jsx
 - stats.html
webpack.config.js
babel.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { ContextReplacementPlugin, HashedModuleIdsPlugin } = require('webpack');

const isProd = process.env.NODE_ENV === 'production';

// Callback function defined on window to manage chunk loading
const WEBPACK_JSONP_CALLBACK = 'wpjpLogMeIn';

// Upper size bound for inlining PNGs as data-uris
const INLINE_IMG_LIMIT = 16 * 1024;
const INLINE_FONT_LIMIT = 16 * 1024;

// Array of modules to be split into a vendor chunk
const VENDOR_MODULES = [
    '@babel/polyfill',
    'core-js',
    'react-router',
    'react-router-dom',
    'react-redux',
    'redux'
];

// Define the filename pattern for use in JS files created by the build
// Development filenames do not include the chunkhash suffix
const OUTPUT_FILENAME = isProd
    ? 'inovmac-services-[name]-[chunkhash:8].js'
    : 'inovmac-services-[name].js';

const devtool = isProd ? 'source-map' : 'eval-source-map';

const publicPath = './src/dist/';

const outputPath = 'dist';
const imagePath = 'images';
const stylePath = 'styles';
const fontPath = 'fonts';
const scriptPath = 'javascript';

// Exclude non-English moment locales
const limitMomentLocales = new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/);

const miniCssExtractPlugin = new MiniCssExtractPlugin({
    filename: isProd ? `${stylePath}/[name]-[chunkhash:8].css` : `${stylePath}/[name].css`,
    chunkFilename: isProd ? `${stylePath}/[name]-[chunkhash:8].css` : `${stylePath}/[name].css`
});

const analyzer = new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    generateStatsFile: false,
    reportFilename: '../stats.html',
    openAnalyzer: false
});

// Ensure module IDs are deterministic (numeric IDs aren't)
const hashedModules = new HashedModuleIdsPlugin({
    hashFunction: 'sha256',
    hashDigest: 'hex',
    hashDigestLength: 8
});

const externals = {
    'prop-types': 'window.PropTypes',
    'react': 'window.React',
    'react-dom': 'window.ReactDOM',
    'react-thunk': 'window.ReactThunk'
};

const jsxIncludes = [
    path.resolve(__dirname, 'src/')
];

module.exports = {
    entry: {
        vendor: VENDOR_MODULES,
        app: './src/index.jsx'
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: `${scriptPath}/${OUTPUT_FILENAME}`,
        chunkFilename: `${scriptPath}/${OUTPUT_FILENAME}`,
        publicPath,
        jsonpFunction: WEBPACK_JSONP_CALLBACK
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    chunks: 'all',
                    test: (module) => {
                        const vendorRoot = `${__dirname}/node_modules`;

                        for (const vendorModule of VENDOR_MODULES) {
                            if (module.context && module.context.startsWith(`${vendorRoot}/${vendorModule}`)) {
                                return true;
                            }
                        }

                        return false;
                    }
                }
            }
        },

        runtimeChunk: {
            name: 'runtime'
        }
    },

    devtool,

    resolve: {
        extensions: ['.js', '.jsx'],
        symlinks: false
    },

    externals,

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: jsxIncludes,
                use: {
                    loader: 'babel-loader'
                }
            },

            /* Global styles (standard CSS) */
            {
                include: [
                    path.resolve(__dirname, 'src/global')
                ],
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },

            /* Component styles (React CSS modules) */
            {
                include: [
                    path.resolve(__dirname, 'src/components')
                ],
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true,
                            localIdentName: '[path]-[local]--[hash:base64:5]'
                        }
                    },
                    'less-loader'
                ]
            },

            {
                test: /\.(png|jpg|gif|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: INLINE_IMG_LIMIT,
                        name: imagePath + '/[name]-[md5:hash:base36:8].[ext]'
                    }
                }
            },

            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: INLINE_FONT_LIMIT,
                        name: fontPath + '/[name]-[md5:hash:base36:8].[ext]'
                    }
                }
            }
        ]
    },

    plugins: [
        miniCssExtractPlugin,
        hashedModules,
        analyzer,
        limitMomentLocales
    ]
};

这是我的package.json脚本部分，

“名称”：“ inovmac”，

“版本”：“ 1.0.0”，

“ description”：“”，

“ main”：“ src / index.jsx”，

“脚本”：{

"clean": "rimraf ./dist/",

"build": "npm run clean && NODE_ENV=production webpack --mode production --progress",

"build:dev": "npm run clean && NODE_ENV=development webpack --mode development",

"build:watch": "npm run clean && NODE_ENV=development webpack --mode development --watch",

"test": "npm run lint && NODE_ENV=test jest && npm run build",

"test:dev": "npm run lint && NODE_ENV=test jest",

"start": "webpack-dev-server"

}

但是在提供应用程序时，我看到的只是目录结构，

localhost app view

[请让我知道我在想什么。谢谢

Answer 1

您应该启动开发服务器，或者通过运行“ npm run build”进行构建，然后提供生成的文件夹，即dist。从图像来看，看起来您正在提供项目文件夹。希望对您有帮助！！