[将代码部署到Test env，但没有部署到具有相同代码库的Dev后，在HTML中

Question

这个问题使我感到困惑，我尝试了我能想到的一切，但没有成功。

1. 我不能在本地复制，也不能在本地复制生产代码。

2. 我在<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>标记内有head。

3. 我已经尝试过webpack-encoding-plugin。

4. 我已经尝试过常用的{{}}角度表达式。

5. 我已经尝试过[innerHTML]=""并将文本也传递到那里。

这是我的webpack配置。

webpack.commmon.js

const helpers = require('./helpers');
const buildUtils = require('./build-utils');

/**
 * Webpack Plugins
 *
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');

const isVendor = ({ resource }) => /node_modules/.test(resource);

/**
 * Webpack configuration
 *
 * See: http://webpack.github.io/docs/configuration.html#cli
 */
module.exports = {
  /**
   * The entry point for the bundle
   * Our Angular.js app
   *
   * See: http://webpack.github.io/docs/configuration.html#entry
   */
  entry: {
    polyfills: './src/polyfills.browser.ts',
    main:      './src/main.ts'
  },

  /**
   * Options affecting the resolving of modules.
   *
   * See: http://webpack.github.io/docs/configuration.html#resolve
   */
  resolve: {
    /**
     * An array of extensions that should be used to resolve modules.
     *
     * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
     */
    extensions: ['.ts', '.js', '.json'],

    /**
     * An array of directory names to be resolved to the current directory
     */
    modules: [helpers.root('src'), helpers.root('node_modules')],
  },

  /**
   * Options affecting the normal modules.
   *
   * See: http://webpack.github.io/docs/configuration.html#module
   */
  module: {

    rules: [
      /**
       * Raw loader support for *.html
       * Returns file content as string
       *
       * See: https://github.com/webpack/raw-loader
       */
      {
        test: /\.html$/,
        use: 'raw-loader',
        exclude: [helpers.root('src/index.html')]
      },

      /**
       * Css Loaders
       *
       * Style-loader injects the styling through a style element.
       *
       * See: https://github.com/webpack-contrib/style-loader
       *
       * Css-loader goes through possible @import and url()
       * lookups within the matched files and treats them as a regular ES2015 import.
       *
       * See: https://github.com/webpack-contrib/css-loader
       *
       * PostCSS allows you to perform transformations over CSS through JavaScript plugins
       *
       * See: http://postcss.org/
       *
       * Autoprefixer adds vendor prefixes to CSS using values from Can I Use.
       *
       * See: https://github.com/postcss/autoprefixer
       *
       * Sass-loader Loads a SASS/SCSS file and compiles it to CSS.
       *
       * See: https://github.com/webpack-contrib/sass-loader
       */
      {
        test: /\.s?css$/,
        use: [
          'to-string-loader', 'style-loader', 'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [require('autoprefixer')]
            }
          }, {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'string-replace-loader',
        query: { search: 'moduleId: module.id,', replace: '' },
        enforce: 'pre'
      },
      {
        test: /\.ts$/,
        exclude: /(node_modules)|(uxd)/,
        loader: 'tslint-loader',
        enforce: 'pre'
      },
      /**
       * File loader for supporting images, for example, in CSS files.
       */
      {
        test: /\.(otf|ttf|woff2?|eot|svg)(\?.*)?$/,
        use: [ 'file-loader?name=fonts/[name].[ext]' ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [ 'file-loader?name=images/[name].[ext]&limit=10000' ]
      }

    ],

  },

  /**
   * Add additional plugins to the compiler.
   *
   * See: http://webpack.github.io/docs/configuration.html#plugins
   */
  plugins: [
    /**
     * Plugin: HtmlWebpackPlugin
     * Description: Simplifies creation of HTML files to serve your webpack bundles.
     * This is especially useful for webpack bundles that include a hash in the filename
     * which changes every compilation.
     *
     * See: https://github.com/ampedandwired/html-webpack-plugin
     */
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      title: buildUtils.DEFAULT_METADATA.title,
      inject: 'body',
      xhtml: true,
      chunksSortMode: function (a, b) {
        const entryPoints = ["inline","polyfills","main"];
        return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]);
      }
    }),

    /**
     * Plugin: CommonsChunkPlugin
     * Description: Shares common code between the pages.
     * It identifies common modules and put them into a commons chunk.
     *
     * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
     * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
     */
    new CommonsChunkPlugin({
      name: 'polyfills',
      minChunks: function (module) {
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    }),

    new CommonsChunkPlugin({
      name: 'main',
      async: true,
      children: true,
      deepChildren: true,
      minChunks: (module, count) => count >= 2 && isVendor(module)
    }),

    new ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery',
      jqueryui: 'jqueryui'
    }),

    /**
     * Plugin: ScriptExtHtmlWebpackPlugin
     * Description: Enhances html-webpack-plugin functionality
     * with different deployment options for your scripts including:
     *
     * See: https://github.com/numical/script-ext-html-webpack-plugin
     */
    new ScriptExtHtmlWebpackPlugin({
      sync: /inline|polyfills/,
      defaultAttribute: 'async',
      preload: [/polyfills|main/],
      prefetch: [/chunk/]
    }),

    /**
     * Plugin LoaderOptionsPlugin (experimental)
     *
     * See: https://gist.github.com/sokra/27b24881210b56bbaff7
     */
    new LoaderOptionsPlugin({
      options: {
        resolve: {},
        ts: {
          configFile: 'tsconfig.json'
        },
        tslint: {
          configuration: require('../tslint.json')
        }
      },
      debug: true
    }),

    new ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)@angular/,
        helpers.root('./src'),
        {}
    )
  ],

  /**
   * Include polyfills or mocks for various node stuff
   * Description: Node configuration
   *
   * See: https://webpack.github.io/docs/configuration.html#node
   */
  node: {
    global: true,
    crypto: 'empty',
    process: true,
    module: false,
    clearImmediate: false,
    setImmediate: false
  }
};

webpack.prod.js

const helpers = require('./helpers');
const buildUtils = require('./build-utils');

/**
 * Used to merge webpack configs
 */
const webpackMerge = require('webpack-merge');
/**
 * The settings that are common to prod and dev
 */
const commonConfig = require('./webpack.common.js');

/**
 * Webpack Plugins
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin');
const PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin');

const uglifyCompressOptions = {
  pure_getters: true, /* buildOptimizer */
  // PURE comments work best with 3 passes.
  // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
  passes: 3,         /* buildOptimizer */
  unused: true,
  dead_code: true
};

/**
 * Webpack Constants
 */
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports =  webpackMerge(commonConfig, {

  /**
   * Options affecting the output of the compilation.
   *
   * See: http://webpack.github.io/docs/configuration.html#output
   */
  output: {

    /**
     * The output directory as absolute path (required).
     *
     * See: http://webpack.github.io/docs/configuration.html#output-path
     */
    path: helpers.root('dist'),

    /**
     * Specifies the name of each output file on disk.
     * IMPORTANT: You must not specify an absolute path here!
     *
     * See: http://webpack.github.io/docs/configuration.html#output-filename
     */
    filename: '[name].bundle.js',

    /**
     * The filename of the SourceMaps for the JavaScript files.
     * They are inside the output.path directory.
     *
     * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
     */
    sourceMapFilename: '[file].map',

    /**
     * The filename of non-entry chunks as relative path
     * inside the output.path directory.
     *
     * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
     */
    chunkFilename: '[name].chunk.js'

  },

  module: {

    rules: [

      /**
       * Extract CSS files from .src/styles directory to external CSS file
       */
      {
        test: /\.s?css$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader'
          }, {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [require('autoprefixer')]
            }
          }, {
            loader: 'sass-loader'
          }]
        })
      },
      {
        test: /\.(js|ts)$/,
        loader: 'string-replace-loader',
        options: {
          multiple: [
            { search: 'Â', replace: '' },
            { search: ' Â', replace: '' }
          ],
          flags: 'gi'
        },
        enforce: 'post'
      }
    ]
  },

  /**
   * Add additional plugins to the compiler.
   *
   * See: http://webpack.github.io/docs/configuration.html#plugins
   */
  plugins: [
    new SourceMapDevToolPlugin({
      filename: '[file].map[query]',
      moduleFilenameTemplate: '[resource-path]',
      fallbackModuleFilenameTemplate: '[resource-path]?[hash]',
      sourceRoot: 'webpack:///'
    }),
    /**
     * Plugin: HtmlWebpackPlugin
     * Description: Simplifies creation of HTML files to serve your webpack bundles.
     * This is especially useful for webpack bundles that include a hash in the filename
     * which changes every compilation.
     *
     * See: https://github.com/ampedandwired/html-webpack-plugin
     */
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      title: buildUtils.DEFAULT_METADATA.title,
      inject: 'body',
      xhtml: true,
      filename: 'entpmf.jsp'
    }),

    /**
     * Plugin: ExtractTextPlugin
     * Description: Extracts imported CSS files into external stylesheet
     *
     * See: https://github.com/webpack/extract-text-webpack-plugin
     */
    new ExtractTextPlugin({
      filename: '[name].[contenthash].css',
      allChunks: true
    }),

    new PurifyPlugin(), /* buildOptimizer */

    new HashedModuleIdsPlugin(),
    new ModuleConcatenationPlugin(),

    /**
     * Plugin: UglifyJsPlugin
     * Description: Minimize all JavaScript output of chunks.
     * Loaders are switched into minimizing mode.
     *
     * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
     *
     * NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
     */
    new UglifyJsPlugin({
      sourceMap: true,
      parallel: true,
      uglifyOptions: {
        ecma: 8,
        warnings: false,    // TODO verbose based on option?
        mangle: true,
        compress: uglifyCompressOptions,
        output: {
          comments: false,
          ascii_only: true
        }
      }
    }),

    new BaseHrefWebpackPlugin({ baseHref: '${pageContext.request.contextPath}/entpmf' }),

    /**
     * Plugin: DefinePlugin
     * Description: Define free variables.
     * Useful for having development builds with debug logging or adding global constants.
     *
     * Environment helpers
     *
     * See: https://webpack.js.org/plugins/define-plugin/
     *
     * NOTE: when adding more properties make sure you include them in custom-typings.d.ts
     */
    new DefinePlugin({
      'ENV': JSON.stringify(ENV),
      'process.env': {
        'ENV': JSON.stringify(ENV),
        'NODE_ENV': JSON.stringify(ENV),
      }
    }),

    FailPlugin
  ],

  /**
   * Include polyfills or mocks for various node stuff
   * Description: Node configuration
   *
   * See: https://webpack.github.io/docs/configuration.html#node
   */
  node: {
    global: true,
    crypto: 'empty',
    process: false,
    module: false,
    clearImmediate: false,
    setImmediate: false
  }

});

您能在此处看到任何可能导致此问题的内容吗？

Answer 1

[UglifyJS配置很可能缺少"ascii_only": true属性。添加它已经帮助了很多人。