IE10中的react vendor.js中的羊皮纸无效定义

时间:2019-01-02 13:05:32

标签: reactjs webpack babel webpack-dev-server

当我在IE 10中运行我的React应用程序时,出现错误SCRIPT5022: [Parchment] Invalid definition。但是在IE 11中,它可以正常工作。

使用React版本16.5.0

  • “ babel-core”:“ ^ 6.26.3”
  • “ babel-loader”:“ ^ 7.1.5”
  • “ babel-polyfill”:“ ^ 6.26.0”
  • “ babel-preset-es2015”:“ ^ 6.24.1”
  • “ babel-preset-react”:“ ^ 6.24.1”
  • “ babel-preset-stage-2”:“ ^ 6.24.1”
  • “ uglifyjs-webpack-plugin”:“ ^ 2.1.1”
  • “验证程序”:“ ^ 10.5.0”
  • “ webpack”:“ ^ 4.18.0”
  • “ webpack-cli”:“ ^ 3.1.0”
  • “ webpack-dev-server”:“ ^ 3.1.5”

Webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
var production = process.argv.reduce(function(p, c){return p || c == '-p'}, false)

var config = {
    context: path.join(__dirname, '/src/main/jsx'),
    entry: {
        app:'./app.jsx',
        vendor: [
            'babel-polyfill',
            'react', 'react-dom','moment', 'lodash/core'
        ],
    },
    mode: production ? 'production' : 'development',
    devtool: production ? 'cheap-source-map' : 'source-map',
    output: {
        path: path.resolve(__dirname, 'target/' + process.env.WAR_NAME + '/assets'),
        filename: path.normalize('[name].js'),
        publicPath: 'assets/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: [
                    {
                        loader: 'style-loader' // creates style nodes from JS strings
                      }, {
                        loader: 'css-loader' // translates CSS into CommonJS
                      }, {
                        loader: 'less-loader' // compiles Less to CSS
                      }
                  ]
                //use: production ? ExtractTextPlugin.extract('css?sourceMap!less?sourceMap'): 'style-loader!css?sourceMap!less?sourceMap'
            },
            {
                test: /\.less$/,
                loader: [
                    {
                        loader: 'style-loader' // creates style nodes from JS strings
                      }, {
                        loader: 'css-loader' // translates CSS into CommonJS
                      }, {
                        loader: 'less-loader' // compiles Less to CSS
                      }
                  ]
                //use: production ? ExtractTextPlugin.extract('css?sourceMap!less?sourceMap'): 'style-loader!css?sourceMap!less?sourceMap'
            },
            {
                test: /\.jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader: [
                    'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-2'
                  ]
                //use: production ? ['babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-2'] : ['react-hot-loader/webpack', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-2']
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin(path.normalize('[name].css')),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
          }),
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        new UglifyJsPlugin(
            {
                uglifyOptions: {
                    mangle: {
                      keep_fnames: true
                    },
                    compress: {
                        inline: false
                      }
                  }
            }),

        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/, /lodash$/)
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                }
            }
                  }
    },
    stats:{
        children: false
    },
    devServer: {
        inline: false,
        quiet: false,
            noInfo: false,
            stats:{
            assets: false,
                colors: false,
                version: true,
                hash: true,
                timings: true,
                chunks: true,
                chunkModules: false,
                children: false
        }
    }
}
config.plugins.push(new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    })
)
module.exports = config

0 个答案:

没有答案