Webpack生产构建：意外的令牌

时间：2018-04-03 14:08:25

标签： reactjs webpack babel production uglifyjs

我一直在尝试使用webpack部署我的生产版本，但我无法完成它。我几乎阅读并尝试了一切，但无法使其发挥作用。 这是我的最后一个错误： enter image description here

我的webpack配置如下所示：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname, 'src');
const buildPath = path.join(__dirname, 'dist');

    module.exports = {
        devtool: 'cheap-module-source-map',
        entry: {
            // base: path.resolve(staticSourcePath, 'src/sass/base.scss'),
            app: path.resolve(sourcePath, 'index.prod.jsx')
        },
        output: {
            path: path.join(__dirname, 'dist'),
            filename: '[name].[chunkhash].js',
            publicPath: '/'
        },
        resolve: {
            extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
            modules: [
                sourcePath,
                path.resolve(__dirname, 'node_modules')
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
            }),
            new webpack.optimize.ModuleConcatenationPlugin(),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                filename: 'vendor.[chunkhash].js',
                minChunks(module) {
                    return module.context && module.context.indexOf('node_modules') >= 0;
                }
            }),

            new UglifyJsPlugin({
                sourceMap: true,
                uglifyOptions: {
                    ecma: 8,
                    compress: {
                        warnings: false
                    }
                }
            }),
            new webpack.LoaderOptionsPlugin({
                options: {
                    postcss: [
                        autoprefixer({
                            browsers: [
                                'last 3 version',
                                'ie >= 10'
                            ]
                        })
                    ],
                    context: staticSourcePath
                }
            }),
            new webpack.HashedModuleIdsPlugin(),
            new HtmlWebpackPlugin({
                template: path.join(__dirname, 'src', 'index.html'),
                path: buildPath,
                excludeChunks: ['base'],
                // filename: 'index.html',
                minify: {
                    collapseWhitespace: true,
                    collapseInlineTagWhitespace: true,
                    removeComments: true,
                    removeRedundantAttributes: true
                }
            }),
            new PreloadWebpackPlugin({
                rel: 'preload',
                as: 'script',
                include: 'all',
                fileBlacklist: [/\.(css|map)$/, /base?.+/]
            }),
            new ScriptExtHtmlWebpackPlugin({
                defaultAttribute: 'defer'
            }),
            new ExtractTextPlugin({
                filename: '[name].[contenthash].css',
                allChunks: true
            }),
            new CompressionPlugin({
                asset: '[path].gz[query]',
                algorithm: 'gzip',
                test: /\.js$|\.jsx$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
                threshold: 10240,
                minRatio: 0.8
            })
        ],
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(png|jp(e*)g|svg)$/,
                    use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 8000, // Convert images < 8kb to base64 strings
                            name: 'images/[hash]-[name].[ext]'
                        }
                    }]
                },

                {
                    test: /\.(js|jsx)$/,
                    loader: "babel-loader",
                    exclude: /node_modules/,
                    query: {
                        presets: ["es2015", "react", "env"],
                        plugins: [
                            "transform-object-rest-spread",
                            "transform-class-properties"
                        ]
                    }
                },

                {
                    test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
                    use: 'file-loader?name=assets/[name]-[hash].[ext]'
                },
                {
                    test: /\.(png|gif|jpg|svg)$/,
                    use: [
                        'url-loader?limit=20480&name=assets/[name]-[hash].[ext]'
                    ],
                    include: staticSourcePath
                }
            ]
        }
    };

我尝试改变babel的预设。我不知道它是否可能是库查询字符串的问题，但即使我不使用它，错误仍然存​​在。 我还尝试了https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/104的几乎所有配置，并且无法使其正常工作：C ....

我希望有人可以帮助我，因为周末以来我一直在与这个错误作斗争，我即将自杀T_T

3 个答案:

答案 0 :(得分：1)

已经尝试过babel-polyfill并且不工作:(

刚刚更新到webpack 4并解决了我的问题。对于很多人来说，webpack＆lt; 4。 我将把我的webpack 4配置留给那些像我一样受苦的人

  

webpack.config.js 

> head(df)
    NAME      date modality
1 Name.1  2-Feb-15        H
2 Name.1  4-Feb-15        H
3 Name.1  6-Feb-15        H
4 Name.1  9-Feb-15        H
5 Name.1 11-Feb-15        H
6 Name.1 13-Feb-15       HI
  

的package.json 

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  resolve: {
    extensions: ['.js', '.jsx']
  },

  output: {
    publicPath: '/'
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|jp(e*)g|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8000, // Convert images < 8kb to base64 strings
            name: 'images/[hash]-[name].[ext]'
          }
        }]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  devServer: {
    // host: '0.0.0.0', /******* Para ver en lan*/
    // disableHostCheck: true,/****** Para ver en lan */
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
};
  

.babelrc 

"scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
     "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-plugin-transform-regenerator": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.24.1",
        "compression-webpack-plugin": "^1.1.11",
        "css-loader": "^0.28.11",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.0.7",
        "mini-css-extract-plugin": "^0.2.0",
        "react": "^16.3.0",
        "react-dom": "^16.3.0",
        "url-loader": "^1.0.1",
        "webpack": "^4.2.0",
        "webpack-cli": "^2.0.12",
        "webpack-dev-server": "^3.1.1"
      },

答案 1 :(得分：1)

根据我的经验，通常认为Uglify过于咄咄逼人。

我注意到，在您的回答中，您已将Uglify替换为compression-webpack-plugin。这可能是导致这个问题消失的原因。

在您原来的package.json中，我将Uglify配置更改为

new UglifyJsPlugin({
  sourceMap:true,
  cache: true,
  parallel: true,
  uglifyOptions:{
    ecma:8
  }
}),

首先，您想要查看Uglify的警告。它会告诉您是否有可能被缩小/混淆算法破坏的代码。如果有，您可能需要使用compress，mangle，toplevel或keep_fnames选项，具体取决于代码的结构。 https://github.com/mishoo/UglifyJS2#minify-options

据我所知，这可能会显示第三方图书馆的大量警告。你可以做几件事：

  1. 找到正确缩小的替代库（无论如何他们可能会更高质量）。
  2. 从/dist而不是/src然后exclude the lib from the Uglify plugin
    3. 导入已缩小版本的lib

    cache和parallel的设置只会使缩小运行更快。

答案 2 :(得分：0)

有时，此类问题可能是由于未转译的软件包（不包括在转译中）导致的。

要解决此问题，您应将以下软件包包含在已转码的代码中：

rules: [
...
test: /\.jsx?$/,
exclude(resource) {
  return (
    /node_modules/.test(resource)
    && !/node_modules\/(query-string|strict-uri-encode|split-on-first)/.test(resource)
  );
},
...
]
相关问题
最新问题