Question

所以，我正在使用webpack 2 + typescript + babel，一切都在google chrome和firefox中运行良好。

但是，当我试图在IE11中打开我的应用程序时，它正在抛出webpackJsonp未定义。

看起来我错过了一些配置或缺少任何webpack插件/预设。

我的打字稿和webpack配置如下：

tsconfig

{
"compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
        "*": [
            "src/*",
            "node_modules/*"
        ]
    }
},
"include": [
    "./src/**/*"
]

}

webpack.config

    require("babel-polyfill");

const webpack = require("webpack");
const { resolve } = require("path");
const translationMerger  = require("./translation-merger");
const { CheckerPlugin, TsConfigPathsPlugin } = require("awesome-typescript-loader");
const WebpackPreBuildPlugin = require('pre-build-webpack');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const WatchIgnorePlugin = require('watch-ignore-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {

    resolve: {
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".jsx", ".less", ".css", ".scss"],
        modules: [resolve(__dirname, 'src'), 'node_modules']
    },
    entry: {
        main: ["babel-polyfill",
        "react-hot-loader/patch", // activate HMR for React
        "webpack-dev-server/client?http://localhost:8080",// bundle the client for webpack-dev-server and connect to the provided endpoint
        "webpack/hot/only-dev-server", // bundle the client for hot reloading, only- means to only hot reload for successful updates
        "./index.tsx"], // the entry point of our app
        silentRenew: ['./silentRenew.ts']
    },
    output: {
        filename:   '[name].bundle.js', // the output bundle
        chunkFilename: '[name]-chunk.js',
        path: resolve(__dirname, "dist"),
        publicPath: "/" // necessary for HMR to know where to load the hot update chunks
    },

    context: resolve(__dirname, "src"),
    devtool: "source-map",

    devServer: {
        hot: true, // enable HMR on the server
        contentBase: resolve(__dirname, "dist"), // match the output path
        historyApiFallback: true, // allow a web page to be served in place of any 404 responses
        publicPath:  "/" // match the output `publicPath`
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: 'tslint-loader',
                options: { /* Loader options go here */ }
            },
            {
                test: /\.js$/,
                use: ["babel-loader", "source-map-loader"],
                exclude: /node_modules/
            },
            {
                test: /\.tsx?$/,
                use: "awesome-typescript-loader",
                exclude: [
                    /node_modules/,
                    /\.spec|test.tsx?$/
                ]
            },
            {
                test: /\.css$/,
                loaders: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            },
            {
                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader?name=fonts/[name].[ext]'
            },

            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: "file-loader?name=images/[name].[ext]"
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            }
            // {
            //     test:    /\.(jpe?g|png|gif|svg)$/i,
            //     loaders: [
            //         'file-loader?limit=100000000&hash=sha512&digest=hex&name=[hash].[ext]',
            //         'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false'
            //     ]
            // }
        ],
    },

    plugins: [
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                // this assumes your vendor imports exist in the node_modules directory
                return module.context && (module.context.indexOf('node_modules') !== -1)
            }
        }),
        new CheckerPlugin(),
        // new StyleLintPlugin({
        //     files: ['themes/dh-theme-2017/**/*.less'],
        //     syntax: 'less'
        // }),
        new webpack.HotModuleReplacementPlugin(), // enable HMR globally
        new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
        new TsConfigPathsPlugin({ tsconfig: './tsconfig.json', compiler: 'typescript' }),

        new ExtractTextPlugin('themes/dh/styles.css'),
        new WebpackPreBuildPlugin((stats) => translationMerger(resolve(__dirname, 'src/services/localisation/'))),  // Merge translation files
        new WatchIgnorePlugin([
            resolve(__dirname, 'src/services/localisation/translations.json'), // Ignore translation json generated by the translation merge to avoid endless build loop
        ]),
        new CopyWebpackPlugin([
            { from: resolve(__dirname, 'app.json') }, 
            { from: resolve(__dirname, 'app.deploy.json') }, 
            { from: resolve(__dirname, 'public/index.html') },])
    ],
    performance: {
        hints: false
    }
};

非常感谢您的帮助/提示！

Answer 1

将uglifyjs-webpack-plugin节点模块升级到1.1.2版后，我收到了同样的错误。回到0.4.6为我解决了这个问题

我没有在你的配置中看到这个模块，但我希望这可以帮助其他人搜索这个问题

IE 11 - 投掷＆＃39; webpackJsonp＆＃39;未定义

1 个答案: