Webpack 3.10.0和babel-polyfill在运行时出现问题

I'm currently using Webpack 3.10.0 along with following babel packages.

我现在使用Webpack 3.10.0和以下的babel包。

"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "~6.13.2",
"babel-preset-react": "~6.11.1",

My issue is, during runtime I get the following error on the browser console and the page doesn't load.

我的问题是，在运行时，我在浏览器控制台上得到以下错误，页面没有加载。

bundle.js:737 Uncaught Error: Cannot find module "babel-polyfill"
    at webpackMissingModule (bundle.js:737)
    at Object.<anonymous> (bundle.js:737)
    at __webpack_require__ (bundle.js:679)
    at bundle.js:725
    at bundle.js:728

My webpack.config.js looks as below.

我的webpack.config。js看起来如下。

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


module.exports = {
    devtool: 'eval-source-map',
    entry: {
        bundle: ['babel-polyfill', './Main.js'],
        bundleIntegrated: ['babel-polyfill', './MainInt.js']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../assets/myproject')
    },
    target: 'web',
    devServer: {
        inline: true,
        port: 3000,
        proxy: {
            '/myct/**': {
                target: 'http://localhost:9000',
                secure: false,
                changeOrigin: true
            }
        }
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ],
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            config: path.join(__dirname, 'config/config.dev')
        }
    },
    module: {
        rules: [
                {
                    test: /.(js|jsx)$/,
                    enforce: 'pre',
                    exclude: /node_modules/,
                    use: [
                            {
                                loader: "eslint-loader",
                            }
                        ],
                },
                {
                    test: /\.(js|jsx)$/,
                    exclude: /(node_modules|__tests__)/,
                    loader: "babel-loader",
                },
                {
                    test: /\.css$/,
                    use: [
                            "style-loader",
                            "css-loader",
                        ],
                },
                {
                    test: /\.less$/,
                    use: [
                            "style-loader",
                            "css-loader",
                            "less-loader",
                        ],
                },
                {
                    test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
                    use: [
                            {
                                loader: "file-loader?name=../assets/mastering/fonts/[name].[ext]",
                            },
                        ],
                },
        ],
    }
}

I have imported babel-polyfill into Main.js and MainInt.js files as instructed in https://babeljs.io/docs/usage/polyfill/ and I haven't used new webpack.optimize.ModuleConcatenationPlugin().

我已经进口了babel-polyfill in Main。js和MainInt。js文件按照https://babeljs的指示。io/docs/usage/polyfill/我还没有使用新的webpack. optimization . moduleconcatenationplugin()。

Any ideas on how to resolve this issue. Thanks in advance :)

关于如何解决这个问题有什么想法吗?提前谢谢:)

1 个解决方案

#1

I found the issue. Thank you everyone for your help.

我发现这个问题。谢谢大家的帮助。

Giving the full path in filename fixed the issue.

在文件名中给出完整路径解决了这个问题。

 output: {
        path: path.resolve(__dirname, '../assets/myproject'),
        filename: '../assets/myproject/[name].js',
    },

#1