Webpack2:包含外部文件并将其添加到捆绑包中

时间:2017-07-13 02:11:38

标签: javascript reactjs webpack scripting

我想在我的react项目中添加一个外部文件(flip.js),所以我想知道如何使用webpack将它导入我的项目,并将其添加到bundle.js文件中。

我已经读过我应该使用脚本加载器,当你谈论Webpack和React时,我是一个新手。

任何想法?

这是我的webpack conf:

var webpack = require('webpack');
var HtmlWebpackPlugin = require("html-webpack-plugin");
var path = require('path');

const VENDOR_LIBS = ['react','react-dom',"axios",
"react-redux","react-router","redux","redux-form",
"redux-promise","lodash","react-toastr","react-spinkit",
"react-router-dom","react-bootstrap","react-addons-css-transition-group",
"babel-preset-stage-1"
];


module.exports = {
  entry: {
    bundle:'./src/index.js',
    vendor:VENDOR_LIBS
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules:[
      {
        use:'babel-loader',
        test:/\.js$/,
        exclude:/node_modules/
      },
      {
        use:['style-loader','css-loader'],
        test:/\.css$/
      },
      {
        test: /\.flipjs\.js$/,
        use: [ 'script-loader' ]
      }
    ] 
  },
   plugins:[
    new webpack.optimize.CommonsChunkPlugin({
      names:['vendor','manifest']
    }),
    new HtmlWebpackPlugin({
      template:'src/index.html'
    })
  ],
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  },
  externals:{
    flip:'flip'
  }
};

0 个答案:

没有答案