首页 > externals的正确使用姿势?

externals的正确使用姿势?

1.我在配置文件中使用了下面代码:

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
}

2.使用外链引用时没有问题,下面这样:

<script src="./react.min.js"></script>
<script src="./react-dom.min.js"></script>
<script src="./js/index.bundle.js"></script>

3.但我想把react.min.js和react-dom.min.js合并成一个文件,以后还有Jquery,我想把这三个都合并成一个文件;

4.于是使用webpack单独把这2个文件打包了,可是在页面引用时报错:

index.bundle.js:102 Uncaught ReferenceError: React is not defined

寻觅很久没有找到对策

下面是我的配置,需要说明的是我用了两个配置文件,一个是用来开发,另一个是用来打包react.min.js和react-dom.min.js这种文件的:

// 用来打包react.min.js和react-dom.min.js
var path = require('path');
var webpack = require('webpack');
var NODE_DIR = path.resolve(__dirname, 'node_modules');

module.exports = {
  entry: {
    lib: ['react', 'react-dom']
  },
  resolve: {
    alias: {
      'react': path.join(NODE_DIR, 'react/dist/react.min.js'),
      'react-dom': path.join(NODE_DIR, 'react-dom/dist/react-dom.min.js')
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react',
      ReactDOM: 'react-dom'
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'lib',
        filename: 'lib.js'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ],
  output: {
    path: 'build',
    filename: 'lib.js'
  }
};
// 这个是用来开发的配置
var path = require('path');
var webpack = require('webpack');
var NODE_DIR = path.resolve(__dirname, 'node_modules');

module.exports = {
  entry: {
    // lib: ['react', 'react-dom'],
    index: './src/app/index.js'
  },
  resolve: {
    // root: path.join(__dirname, 'src'),
    // alias: {
    //   'react': path.join(NODE_DIR, 'react/dist/react.min.js'),
    //   'react-dom': path.join(NODE_DIR, 'react-dom/dist/react-dom.min.js')
    // },
    extensions: ['', '.js', '.jsx']
  },
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  },
  module: {
    // 配置了这个报错 --require is not defined
    // noParse: [
    //   path.join(NODE_DIR, 'react/dist/react.min.js'),
    //   path.join(NODE_DIR, 'react-dom/dist/react-dom.min.js')
    // ],
    loaders: [
      {
        test: /\.js?$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel',
        query: {
          // plugins: 'transform-runtime',
          presets: ['es2015', 'stage-0', 'react']
        }
      }
    ]
  },
  plugins: [
    // new webpack.ProvidePlugin({
    //   React: 'react',
    //   ReactDOM: 'react-dom'
    // }),
    // new webpack.optimize.CommonsChunkPlugin({
    //     name: 'lib',
    //     filename: 'lib.js'
    // })
  ],
  output: {
    path: 'build/js',
    filename: 'index.bundle.js'
  }
};

代码已经同步到这里

【热门文章】
【热门文章】