Question

我有一个用create-react-app-typescript创建的项目（〜5G），想知道如何将happypack集成到现有应用程序中。

我知道我必须将happypack代码添加到react-scripts-ts/config/webpack.config.js中，但是在添加任何内容时会很犹豫，以防万一它破裂。

有两个plugins属性，一个在module.exports --> resolve --> plugins内部，另一个仅在module.eports --> plugins内部。我在想必须在happypack/loader这样的rules属性内添加use: 'happypack/loader'，但是我不确定在哪里实际创建新的HappyPack。

我可以用新的HappyPack替换module.exports --> resolve --> plugins下的现有插件吗？（现在有两个现有的插件：

new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), new TsconfigPathsPlugin({ configFile: paths.appTsConfig }),

是这样的： ```

  new HappyPack({
    loaders: [ 'babel-loader?presets[]=es2015' ]
  })

2. or do I have to do this under the `module.exports --> plugins`. I'm thinking its this option. This array contains the following:

// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development, this will be an empty string.
new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
}),
// Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebookincubator/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Perform type checking and linting in a separate process to speed up compilation
new ForkTsCheckerWebpackPlugin({
  async: false,
  watch: paths.appSrc,
  tsconfig: paths.appTsConfig,
  tslint: paths.appTsLint,
}),

``` 3.成功添加HappyPack之后，我需要编辑create-react-app-typescript automatically generated?

我已经搜索了各自的github仓库，谷歌搜索并检查stackoverflow的问题，但没有发现任何问题。我确定我不是唯一面临繁重构建时间的人...

如何将“ happypack”与“ Create-React-App”集成

0 个答案: