Related
I've 3 applications which are embedded on the same spring service (built by yarn maven plugin) with the following configuration:
App Shell
module.exports = {
mode: 'production',
entry: './src/index',
cache: false,
devtool: false,
optimization: {
minimize: true,
},
output: {
publicPath: 'http://localhost:8000/gui/shell/',
clean: true,
pathinfo: false,
path: path.resolve(__dirname, 'build/'),
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
},
module: {
rules: [
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
},
{
test: /\.css$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
},
{
test: /\.json$/,
loader: 'json-loader',
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
},
],
},
plugins: [
new ModuleFederationPlugin({
name: 'frontend_shell',
filename: 'remoteEntry.js',
remotes: {
store: 'store#http://localhost:8000/store/remoteEntry.js',
appOneRemote: 'appOneRemote#http://localhost:8000/appOneRemote/remoteEntry.js',
},
exposes: {
'./translate': './src/utility/i18n/translate.js',
'./useAllUserInfo': './src/hooks/useAllUserInfo.js',
'./useDarkMode': './src/hooks/useDarkMode.js',
},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
eager: true,
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
eager: true,
},
},
}),
new HtmlWebPackPlugin({
template: './public/index.html',
inject: 'body',
hash: true,
minify: true,
}),
new ESLintPlugin({
extensions: ['js', 'jsx'],
}),
],
};
App remote 1
module.exports = {
mode: 'production',
entry: './src/index',
cache: false,
devtool: false,
optimization: {
minimize: true,
},
output: {
publicPath: 'http://localhost:8000/appOneRemote/',
clean: true,
pathinfo: false,
path: path.resolve(__dirname, 'build/'),
},
resolve: {
extensions: ['.js', '.mjs', '.jsx', '.css'],
alias: {
events: 'events',
},
},
module: {
rules: [
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
},
{
test: /\.css$/i,
use: [
'style-loader', 'css-loader',
],
},
{
test: /\.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.svg$/,
use: ['#svgr/webpack'],
},
{
test: /\.json$/,
loader: 'json-loader',
},
],
},
plugins: [
new ModuleFederationPlugin({
name: 'appOneRemote',
filename: 'remoteEntry.js',
remotes: {
store: 'store#http://localhost:8000/store/remoteEntry.js',
shell: 'frontend_shell#http://localhost:8000/gui/shell/remoteEntry.js',
},
exposes: {
'./ManageUser': './src/pages/ManageUser/ManageUser.jsx',
},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
eager: true,
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
eager: true,
},
},
}),
new HtmlWebPackPlugin({
template: './public/index.html',
}),
new ESLintPlugin({
extensions: ['js', 'jsx'],
}),
],
};
App remote 2
module.exports = {
mode: 'production',
entry: './src/index',
cache: false,
devtool: false,
optimization: {
minimize: true,
},
output: {
publicPath: 'http://localhost:8000/store/',
clean: true,
pathinfo: false,
path: path.resolve(__dirname, 'build/'),
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
},
module: {
rules: [
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
},
{
test: /\.(css|s[ac]ss)$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.json$/,
loader: 'json-loader',
},
],
},
plugins: [
new ModuleFederationPlugin({
name: 'store',
filename: 'remoteEntry.js',
remotes: {},
exposes: { './store': './src/store' },
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
},
'react-redux': {
singleton: true,
},
},
}),
new HtmlWebPackPlugin({
template: './public/index.html',
}),
new ESLintPlugin({
extensions: ['js', 'jsx'],
}),
],
};
This is exactly what I get in the console:
Warning:
Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.
(error: http://localhost:8000/appOneRemote/remoteEntry.js)
Warning:
Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.
(error: http://localhost:8000/store/remoteEntry.js)
Error:
Uncaught (in promise) ScriptExternalLoadError: Loading script failed.
(error: http://localhost:8000/store/remoteEntry.js)
while loading "./store" from 83878
at Object.83878 (main.js?1154643655f4125db28e:2:130241)
Also I can retrieve my shell remote entry here: http://localhost:8000/gui/shell/remoteEntry.js, but I got a 404 in the following:
http://localhost:8000/store/remoteEntry.js
http://localhost:8000/appOneRemote/remoteEntry.js
Any ideas?
I would like to use a sequential number such as 1.js, 2.js,... for chunkFileName in production mode of webpack v5. I set [index].js for naming but webpack gives me following error:
Error: Conflict: Multiple chunks emit assets to the same filename
[index].js (chunks 179 and 216)
Here's my config for webpack:
var config = {
devtool: 'eval-source-map',
cache: true,
entry: {
main: path.join(__dirname, "app", "App.js"),
},
output: {
path: path.join(__dirname, 'scripts', 'js'),
filename: '[name].js',
chunkFilename: '[name].js',
sourceMapFilename: '[file].map',
publicPath: '/scripts/js/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
babelrc: false,
presets: [
['es2015', { modules: false }],
'react',
],
plugins: [
'syntax-dynamic-import',
'transform-object-rest-spread',
'transform-class-properties',
'transform-object-assign',
],
}
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
'css-loader',
]
}
],
},
optimization: {
minimize: false,
splitChunks: {
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
},
}
},
plugins: [
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js)$|\.(css)$|\.(html)$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
//threshold: 10240,
//minRatio: 0
})
],
resolve: {
extensions: ['.js', '.jsx', '.css', '.ts'],
alias: {
'react-loadable': path.resolve(__dirname, 'app/app.js'),
},
},
};
if (process.env.NODE_ENV === 'production') {
const TerserPlugin = require("terser-webpack-plugin");
config.devtool = false;
config.output.chunkFilename = '[index].js';
config.optimization = {
minimize: true,
minimizer: [new TerserPlugin()],
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all",
}
},
}
},
config.plugins = [
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify('production') }
}),
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js)$|\.(css)$|\.(html)$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
//threshold: 10240,
//minRatio: 0
})
];
}
module.exports = config;
Does anyone know where is the problem? Thank you in advance!
I've found my answer! There is a config for webpack's optimization section which can be set and it gives us a sequential numbers as chunkFileName and its chunkIds which should set to natural. So:
config.optimization = {
chunkIds: "natural",
minimize: true,
minimizer: [new TerserPlugin()],
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
},
}
}
I want to upgrade to webpack 5. I've followed the official guide, upgraded all critical libraries (react17, babel, loaders, etc.). When launching the app, it crashes with 23 errors. 21 of them come from #babel/runtime/helpers.
A typical error looks like this:
ERROR in ../../node_modules/#babel/runtime/helpers/esm/createSuper.js 1:0-46
Module not found: Error: Can't resolve './getPrototypeOf' in '/Users/myName/Desktop/myapp/node_modules/#babel/runtime/helpers/esm'
The two other errors are:
Module not found: Error: Can't resolve 'url-loader'
ERROR in FaviconsWebpackPlugin - This FaviconsWebpackPlugin version is not compatible with your current HtmlWebpackPlugin version.
Please upgrade to HtmlWebpackPlugin >= 5 OR downgrade to FaviconsWebpackPlugin 2.x
Note: My html-webpack-plugin version is above 5 and favicons-webpack-plugin is the latest version as well...
Anyway, here is my webpack file:
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const webpack = require("webpack");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const getKonf = require("./konf");
const getWebpackServerOptions = require("./server");
function buildWebpackConfiguration() {
const konfiguration = getKonf("development"); // returns a large json with proxies, token, etc.
const rootPath = path.resolve(__dirname, "../../../");
return {
devtool: "eval-source-map",
mode: "development",
node: {
global: false,
__filename: false,
__dirname: false,
},
resolve: {
extensions: [".json", ".jsx", ".js", ".tsx", ".ts"],
alias: {
"#componens": "./components",
"react-dom": "#hot-loader/react-dom",
},
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules\/(?!(redux-logger|strict-uri-encode|query-string)\/).*/,
use: [
{
loader: "babel-loader",
options: {
configFile: path.resolve(rootPath, "./babel.config.js"),
},
},
"react-hot-loader/webpack",
],
},
{
test: /\.html$/,
use: ["html-loader"],
},
{
test: /\.less$/,
exclude: /\.m\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
{
test: /\.(eot|gif|jpg|png|svg|ttf|woff)$/,
exclude: [
path.resolve(rootPath, "./assets/svg"),
path.resolve(rootPath, "./icon/glyphs"),
path.resolve(rootPath, "./search/assets"),
],
use: "url-loader?limit=1024",
},
{
test: /\.m\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[local]___[hash:base64:5]",
},
},
},
"less-loader",
],
},
{
test: /\.svg$/,
use: {
loader:
"svg-inline-loader?{'removeTags': true, 'removingTags': ['title', 'desc']",
},
},
{
test: /\.tsx?$/,
use: [{ loader: "ts-loader", options: { transpileOnly: true } }],
exclude: /node_modules/,
},
{
include: /assets\/sw/,
test: /\.js$/,
loader: "file-loader",
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: "My app",
template: path.resolve(__dirname, "./template/index.ejs"),
minify: true,
hash: true,
scripts: [],
styles: [],
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("development"),
"process.env.MOCK_REQUESTS": JSON.stringify(
process.env.MOCK_REQUESTS || "0"
),
KONF: JSON.stringify(konfiguration),
}),
new FaviconsWebpackPlugin({
logo: path.resolve(rootPath, "./assets/logo.svg"),
inject: true,
title: "My App",
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /de|en|fr|zh/),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
chunkFilename: "[id].[contenthash].css",
}),
new BundleAnalyzerPlugin(),
],
optimization: {
minimize: true,
minimizer: [new OptimizeCSSAssetsPlugin({}), new TerserPlugin()],
moduleIds: "deterministic",
splitChunks: {
chunks: "all",
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
name: "node_vendors",
chunks: "all",
},
},
},
},
devServer: getWebpackServerOptions(konfiguration),
};
}
module.exports = buildWebpackConfiguration;
Here is my Babel config file:
module.exports = {
ignore: ["node_modules"],
babelrcRoots: [".", "./packages/*", "./app/*"],
presets: [
"#babel/preset-typescript",
[
"#babel/preset-env",
{
targets: {
browsers: ["defaults"],
},
},
],
"#babel/preset-react",
],
env: {
test: {
plugins: [
[
"babel-plugin-react-css-modules",
{
generateScopedName: "[local]",
filetypes: {
".less": {
syntax: "postcss-less",
},
},
},
],
],
},
development: {
plugins: [
[
"babel-plugin-react-css-modules",
{
webpackHotModuleReloading: true,
generateScopedName: "[local]___[hash:base64:5]",
handleMissingStyleName: "warn",
filetypes: {
".less": {
syntax: "postcss-less",
},
},
},
],
],
},
production: {
plugins: [
[
"babel-plugin-react-css-modules",
{
webpackHotModuleReloading: true,
generateScopedName: "[hash:base64]",
filetypes: {
".less": {
syntax: "postcss-less",
},
},
},
],
],
},
},
plugins: [
"#babel/plugin-transform-object-assign",
"#babel/plugin-transform-regenerator",
"#babel/plugin-transform-runtime",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-transform-modules-commonjs",
["#babel/plugin-proposal-class-properties", { loose: true }],
[
"module-resolver",
{
cwd: "babelrc",
root: "./",
alias: {
"#components": "./components",
"#assets": "./assets",
},
},
],
],
};
How to fix this?
releted to https://github.com/babel/babel/issues/8462, runtime issues can be solved by upgrading the #babel/runtime pkg version above 7.12.0
Here is my config for webpack production mode.
const serverConfig = {
//mode: "production",
optimization: {
//minimize: true,
splitChunks: {
chunks: "async",
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all",
},
// server: {
// name: "server",
// chunks: "all",
// enforce: true,
// },
// flightsDesktop: {
// name: "flightsDesktop",
// test: (m, c, entry = "flightsDesktop") => m.constructor.name === "CssModule" && recursiveIssuer(m) === entry,
// chunks: "all",
// enforce: true,
// },
},
},
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: true,
ecma: 6,
output: {
comments: false,
},
compess: {
dead_code: true,
drop_console: true,
},
},
sourceMap: false,
}),
],
},
entry: {
server: path.resolve(__dirname, "../script/server_script.js"),
flightsDesktop: cssHelper.getFlightsDesktopHomeCss(__dirname),
hotelsDesktop: cssHelper.getHotelsDesktopHomeCss(__dirname),
homestaysDesktop: cssHelper.getHomestayDesktopHomeCss(__dirname),
holidaysDesktop: cssHelper.getHolidayDesktopHomeCss(__dirname),
flightsAdaptive: cssHelper.getFlightsAdaptiveHomeCss(__dirname),
hotelsAdaptive: cssHelper.getHotelsAdaptiveHomeCss(__dirname),
homestaysAdaptive: cssHelper.getHomestayAdaptiveHomeCss(__dirname),
holidaysAdaptive: cssHelper.getHolidayAdaptiveHomeCss(__dirname),
experiencesDesktop: cssHelper.getExperiencesDesktopHomeCss(__dirname),
experiencesAdaptive: cssHelper.getExperiencesAdaptiveHomeCss(__dirname),
hotelsSEODesktop: cssHelper.getHotelsSEODesktopCss(__dirname),
hotelsSEOAdaptive: cssHelper.getHotelsSEOAdaptiveCss(__dirname),
trainsDesktop: cssHelper.getTrainsDesktopHomeCss(__dirname),
trainsAdaptive: cssHelper.getTrainsAdaptiveHomeCss(__dirname),
},
target: "node",
output: {
// path: path.join(__dirname, "../build"),
// filename: "[name].js",
//libraryTarget: "commonjs2",
path: path.join(__dirname, "../build"),
// Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: "[name].js",
//chunkFilename: "static/js/[name].[hash:8].chunk.js",
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath,
},
module: {
rules: [
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/,
],
// loader, query and exclude
loader: "url-loader",
options: {
limit: 10000,
name: "/static/media/[name].[hash:8].[ext]",
},
},
{
test: /\.svg$/,
loader: "file-loader",
options: {
name: "/static/media/[name].[hash:8].[ext]",
},
},
{
test: /\.css$/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
minimize: true,
},
},
"postcss-loader",
"sass-loader",
],
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
{
test: /\.scss$/,
use: [
// MiniCssExtractPlugin.loader,
{
loader: "css-loader/locals",
},
],
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: "babel-loader",
query: { presets: ["react", "es2016", "es2015"], plugins: ["transform-class-properties"] },
},
],
},
plugins: [
new webpack.DefinePlugin(env),
//new WriteFilePlugin(),
// This helps ensure the builds are consistent if source hasn't changed:
new webpack.optimize.OccurrenceOrderPlugin(),
// Try to dedupe duplicated modules, if any:
// new webpack.optimize.DedupePlugin(),
// Minify the code.
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// screw_ie8: true, // React doesn't support IE8
// warnings: false,
// },
// mangle: {
// screw_ie8: true,
// },
// output: {
// comments: false,
// screw_ie8: true,
// },
// }),
//new UglifyJsPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
path: "static/css/",
}),
//new ExtractTextPlugin("static/css/[name].css"),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9", // React doesn't support IE8 anyway
],
}),
],
},
}),
],
resolve: {
modules: ["src", "node_modules"],
},
}
module.exports = [serverConfig]
I am miising something obvious, what wrong I am doing?
Updated webpack to the latest version(2.6.1), so the webpack config file, that came with the boilerplate, became outdated...
Looked at the official documentation on migration, but still a bit lost regarding how exactly i need to update my config file:
'use strict';
const path = require('path');
const webpack = require('webpack');
const NODE_ENV = process.env.NODE_ENV;
const SaveAssetsJson = require('assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
devtool: '#source-map',
// Capture timing information for each module
profile: false,
// Switch loaders to debug mode
debug: false,
// Report the first error as a hard error instead of tolerating it
bail: true,
entry: [
'babel-polyfill',
'./assets/main.jsx',
],
output: {
path: 'public/dist/',
pathInfo: true,
publicPath: '/dist/',
filename: 'bundle.[hash].min.js',
},
resolve: {
root: path.join(__dirname, ''),
modulesDirectories: [
'web_modules',
'node_modules',
'assets',
'assets/components',
],
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx'],
},
resolveLoader: {
},
plugins: [
new CleanWebpackPlugin(['public/dist'], {
verbose: true,
dry: false,
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
output: {
comments: false,
},
compress: {
warnings: false,
screw_ie8: true,
},
}),
new SaveAssetsJson({
path: process.cwd(),
filename: 'assets.json',
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
],
query: {presets: ['es2015', 'react'] },
module: {
rules: [
{
use: [
"style-loader",
"css-loader",
"autoprefixer-loader",
]
},
{
test: /\.scss$/, // sass files
loader: 'style!css!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded',
},
{
test: /\.(ttf|eot|svg|woff)(\?[a-z0-9]+)?$/, // fonts files
loader: 'file-loader?name=[path][name].[ext]',
},
{
test: /\.jsx?$/, // react files
exclude: /node_modules/,
loaders: ['babel?presets[]=es2015,presets[]=stage-0,presets[]=react'],
include: path.join(__dirname, 'assets'),
},
],
noParse: /\.min\.js/,
}
};
In the end there were few deletion of the deprecated plugin calls and restructuring some of the fields. Here is the 2.6.1 compatible version, the parts of the file that were changed:
'use strict';
module.exports = {
devtool: '#source-map',
// Capture timing information for each module
profile: false,
// Switch loaders to debug mode
//debug: false,
// Report the first error as a hard error instead of tolerating it
bail: true,
entry: [
'babel-polyfill',
'./assets/main.jsx',
],
output: {
path: '/public/dist/', //This has to be an absolute path
publicPath: '/dist/',
filename: 'bundle.[hash].min.js',
},
resolve: {
//merging root and modules
modules: [
path.join(__dirname, ''),
'web_modules',
'node_modules',
'assets',
'assets/components',
],
extensions: [ '.webpack.js', '.web.js', '.js', '.jsx'], //Removed empty entry
},
resolveLoader: {
},
plugins: [
new CleanWebpackPlugin(['public/dist'], {
verbose: true,
dry: false,
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
sourceMap: true, //added this
output: {
comments: false,
},
compress: {
warnings: false,
screw_ie8: true,
},
}),
new SaveAssetsJson({
path: process.cwd(),
filename: 'assets.json',
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
],
module: {
//Modules are slightly differently listed now
rules: [
{
test: /\.(css|scss)$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', "stage-0", 'react']
}
}
}
],
noParse: /\.min\.js/,
}
};