Develop Reference

Exclude specific file from webpack bundle

In my React app I'm using Webpack. Here is my webpack.config:
"use strict";
var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
entry: "./Scripts/reactApp/index.jsx",
output: {
path: path.resolve(__dirname, "./Scripts/reactApp/build"),
filename: "react_bundle.js"
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: [/node_modules/, path.resolve(__dirname, "./Scripts/reactApp/translations/he.translations.json")],
use: {
loader: "babel-loader"
}
},
{
test: /\.js$/,
exclude: [/node_modules/, path.resolve(__dirname, "./Scripts/reactApp/translations/he.translations.json")],
use: {
loader: "babel-loader"
}
}
]
},
devtool: "inline-source-map",
plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};
I'm trying to exclude from bundle he.translations.json
But webpack included it whatever.
Can you explain me what I do wrong?
Sorry in advance, I'm new in webpack.

You can just do (from webpack docs)
...
exclude: [/node_modules/, path.resolve(__dirname, 'Scripts/reactApp/translations/he.translations.json')],
...
There's no dot in the path and, of course, assuming you have the wepback config file in the proper place.

Webpack doesn't babelize some node_modules with ES6

I have been having issues with webpack and some node_modules libraries not being "babelized" in the outputed bundle. Most notably ES6 syntax such as 'const'.
Up until now I would solve this problem by including the specific libraries that would create that issue in the babel-loader path to force their babelization. However in this particular case, the unbabelized code seems to come from a library that isn't in my package.json, which means it must be nested in another library.
How can I track down from which library that nested library comes from ?
Or is there a simpler solution to ensure that the entirety of my modules don't remain in ES6 form ?
Below is my webpack.config.js file :
var webpack = require('webpack');
var path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
var BUILD_DIR = path.resolve(__dirname, 'static/public/js');
var APP_DIR = path.resolve(__dirname, 'static/js');
var CSS_DIR = path.resolve(APP_DIR, 'css');
var config_function = function(env){
var config = {
entry: ['babel-polyfill', APP_DIR + '/index.js'],
output: {
path: BUILD_DIR,
filename: env && env.prod ? 'bundle.min.js' : 'bundle.js'
},
plugins: env && env.prod ? [
new UglifyJSPlugin({uglifyOptions:{
ecma: 5,
mangle: {
safari10: true
},
compress: true
}})
]: [],
module: {
loaders: [{
test: /\.jsx?/,
include: [APP_DIR, /node_modules\/snakecase-keys/, /node_modules\/redux-api-middleware/,/node_modules\/map-obj/], // Those are some of the libraries that are not babelized...
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-2'] //, 'react-hmre']
}
}
, {
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.json$/,
loader: 'json-loader'
}, {
test: /\.less$/,
include: CSS_DIR,
loaders: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
}
};
return config;
}
module.exports = config_function;

Is there a way to exclude node_modules from webpack on a global levle?

I have simple config for demonstration that excludes node modules from js and jsx file, but can't find a solution to exclude node_modules, globally so I don't need to always specify this exclude in every loader
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: path.resolve(__dirname, "../src/index.js")
},
output: {
path: path.resolve(__dirname, "../dist"),
filename: "[name].[chunkhash].js",
publicPath: "/",
chunkFilename: "[name].[chunkhash].js"
},
module: {
rules: [
{ test: /\.js$/, loaders: ["babel-loader"], exclude: /node_modules/ },
{ test: /\.jsx$/, loaders: ["babel-loader"], exclude: /node_modules/ },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new CleanWebpackPlugin([path.resolve(__dirname, "../dist")]),
new HtmlWebpackPlugin({ template: path.resolve(__dirname, "../public/index.html") }),
new ExtractTextPlugin("styles.css")
]
};
Is there a way to achieve this? I'm on webpack 3

You can use
{ test: /\.jsx?$/, loaders: ["babel-loader"], exclude: /node_modules/ },

how to include frontend javascript files to bundle webpack

I need to bundle my front-end javascript files to bundle.js.
here is my webpack.config file,
var path = require('path');
var nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
target: 'node',
entry:['babel-polyfill', './bin/run.js'],
output: {
path: './build',
filename: '[name].min.js'
},
externals: nodeModules,
plugins: [
new HtmlWebpackPlugin(),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
screw_ie8: true
}
})
],
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.js$/,
include:/public/,
exclude: /(node_modules|bower_components)/
}
],
noParse: [/ws/]
}
};
how can I include my front-end javascript files to the bundle ?

If you are using webpack2 then you should know this change:
module: {
rules: [ // <----it is been changed to "rules"
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
}
],
noParse: [/ws/]
}

Webpack error: You may need an appropriate loader to handle this file type. | #charset "UTF-8";

I am trying to process a .scss file with Webpack 2.2.0 but instead of getting it injected into a style tag into my index.html file, I wanted to extract it into a .css file with ExtractTextPlugin.
The following is my webpack.config.js file:
// webpack.config.js
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('[name].css');
module.exports = {
context: path.resolve(__dirname, './src'),
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
},
{
test: /\.(sass|scss)$/,
use: [
///////////////////////////////////////
// THIS WONT WORK AND CAUSES THE ERROR
///////////////////////////////////////
extractCSS.extract({
fallbackLoader: 'style-loader',
loader: ['css-loader', 'sass-loader']
}),
/////////////
// THIS WORKS
/////////////
// 'style-loader', 'css-loader', 'sass-loader'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
},
plugins: [
extractCSS
]
}
Any help is appreciated. Thanks.

This is a bug currently in ETP. I believe my switching use to "loader" that this will solve your problem. Module parse failed error for SCSS file.