我想在我的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'
}
};