Webpack setup to bypass loading specific files with babel - reactjs

Question

I have a bootstrap theme that came with JS and CSS files that I'd like to integrate into my react app. I'm running into issues requiring the JS files because they don't export modules appropriately or properly define variables (using babel loader). I'd like to be able to require the JS in my app but not run them through babel. I'd also like to be able to use webpack's chunking and minification on these files if possible.
How do I go about setting this up?
Edit
I'm pretty sure what I need in reference to babel is the exclude config parameter. Unfortunately no matter what I try the exclude config isn't honored.
{
test: /\.js/,
loaders: [ 'react-hot', 'babel' ],
include: [
path.join(__dirname, 'src', 'app')
],
exclude: [
path.join(__dirname, 'src', 'semantic-v1.1.2')
]
},
Here's the error I receive:
ERROR in ./src/semantic-v1.1.2/assets/js/imagesloaded.pkgd.js
Module not found: Error: Cannot resolve module 'eventEmitter' in /Users/bradr/Dropbox (Personal)/Development/ritasfoods-com/src/semantic-v1.1.2/assets/js
# ./src/semantic-v1.1.2/assets/js/imagesloaded.pkgd.js 731:2-735:24
I'm sure I'm missing something simple.
Full webpack.config.js:
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/app/index'
],
output: {
path: path.join(__dirname, 'static'),
filename: 'bundle.js',
publicPath: '/static/'
},
module: {
noParse: [
/aws\-sdk/, // Hack to be able to import aws sdk.
],
loaders: [
{
test: /\.js/,
loaders: [ 'react-hot', 'babel' ],
include: path.join(__dirname, 'src/app'),
exclude: path.resolve('src', 'semantic-v1.1.2')
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.md$/, loader: "html!markdown?gfm=false" },
{ test: /\.html/, loader: 'html' },
{ test: /\.yaml/, loader: 'json!yaml' },
{ test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" },
{ test: /\.(jpg|png)$/, loader: 'url' }
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
resolve: {
// Removes the need to specify file type in imports.
extensions: ['', '.js', '.json'],
alias:{
theme: path.resolve( __dirname, 'src', 'semantic-v1.1.2', 'assets')
}
}
};
.babelrc
{
"presets": ["es2015", "stage-0", "react"],
}
package.json
{
"name": "ritasfoods-com",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"start": "node server.js",
"build-prod": "./node_modules/webpack/bin/webpack.js -p --config webpack.config.prod.js --progress --colors",
"deploy-prod": "ops/deploy-prod"
},
"repository": {
"type": "git",
"url": "..."
},
"author": "Brad Reynolds",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.6.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"html-loader": "^0.4.3",
"node-sass": "^3.4.2",
"react-hot-loader": "^1.3.0",
"redux-devtools": "^3.2.0",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.1",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"aws-sdk": "^2.2.40",
"babel-polyfill": "^6.8.0",
"babel-preset-stage-0": "^6.5.0",
"es6-promise": "^3.1.2",
"events": "^1.1.0",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"imports-loader": "^0.6.5",
"invariant": "^2.2.1",
"jquery": "^2.2.1",
"less": "^2.6.1",
"less-loader": "^2.2.3",
"markdown-loader": "^0.1.7",
"mustache": "^2.2.1",
"numeral": "^1.5.3",
"pluralize": "^1.2.1",
"react": "15.0.1",
"react-dom": "15.0.1",
"react-redux": "^4.4.5",
"react-router": "^2.0.0",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1",
"url-loader": "^0.5.7"
}
}
server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(8080, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Listening at http://localhost:8080/');
});

Answer 1

I bit the bullet and installed every JS file from the bootstrap theme via npm. It was a PITA as I had to configure a few via webpack. But it's done so I can move on.

Answer 2

I do this for image assets for a chrome extension. The app itself doesn't use them, but Chrome does, so I need them copied into the build folder.
Create an extra entry for static files. Your entry is a js file that just requires all the static files. You will end up with a useless extra bundle as a byproduct, but all your files will be copied over to your build folder.
I'll show you the example of images first because I have working code to pull that from.
webpackconfig.js
// ...
entry: {
// ...
'img': './img/index.js'
},
output: {
// dynamic bundle name for multiple outputs
filename: '[name].js'
// ...
},
rules: {
// ...
{
test: /\.png|svg|jpg|gif$/,
use: [
{
// copy loaded files to
// output_base_path/input_relative_path/filename.extension
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
useRelative: true
}
},
{
loader: 'image-webpack-loader',
options: { /* ... */ }
}
]
}
}
src/img/index.js
// This is the only line in this file.
// Recursively require all png or jpg from current folder
require.context('./', true, /\.(png|jpg)$/)
So now I'll get speculative and try to translate it to your use-case as best I can without being able to test it:
webpackconfig.js
// ...
entry: {
// ...
'static': './static/index.js'
},
output: {
filename: '[name].js'
// ...
},
rules: {
// ...
{
// I'm guessing the string being tested here is a relative path.
// If I'm wrong, this regex will need some tweaking.
// Matches everything in assets folder
test: /^assets\/.+/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
useRelative: true
}
},
{
// Not sure if you actually need this loader, but it's something I
// would try if file loader is choking on your files, especially
// if you are processing multiple filetypes.
loader: 'raw-loader'
}
]
}
}
src/assets/index.js
// Let's just match everything. Putting images in this folder will
// probably give you headaches. Limit it to text files and handle images
// separately.
require.context('./', true, /.+/)
Here's some info on require.context and file-loader