如何在 ReactJS 项目中使用 webpack 预加载第三方的 css 和 js 文件？答案

【问题标题】：How to preload third-party's css and js files using webpack in ReactJS project?如何在 ReactJS 项目中使用 webpack 预加载第三方的 css 和 js 文件？
【发布时间】：2017-02-06 19:58:19
【问题描述】：

和使用ProvidePlugin预加载jQuery一样，有没有办法预加载第三方的css和js文件，而不是在入口js文件中使用import？

我为什么要预加载这些文件是因为在入口js文件中导入jQuery-ui时出现错误。另外，我认为预加载库很好。

./assets/js/jquery-ui.min.js 关键依赖： 719:76-84 这似乎是一个预构建的 javascript 文件。虽然这是可能的，但不建议这样做。尝试要求原始来源以获得更好的结果。 @ ./assets/js/jquery-ui.min.js 719:76-84

谢谢你！

【问题讨论】：

标签： javascript jquery reactjs webpack

【解决方案1】：

您应该在 webpack 配置上的 entry 处导入第三方 css 文件。比如下面的例子：

module.exports = {
  entry: {
    'main': [
      'bootstrap-sass!./src/theme/bootstrap.config.js',
      './src/client.js',
      './src/someCSSFILE.js'
    ]
  },
  output: {
    path: assetsPath,
    filename: 'bundle.js',
    publicPath: 'http://' + host + ':' + port + '/dist/',
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
      { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }
 ]

}

【讨论】：