internals/webpack/webpack.dev.babel.js
/**
* DEVELOPMENT WEBPACK CONFIGURATION
*/
const path = require('path');
const fs = require('fs');
const glob = require('glob');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const logger = require('../../server/logger');
const pkg = require(path.resolve(process.cwd(), 'package.json'));
const { dllPlugin } = pkg;
const plugins = [
new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new HtmlWebpackPlugin({
inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
template: 'app/index.html',
}),
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/, // exclude node_modules
failOnError: false, // show a warning when there is a circular dependency
}),
];
if (dllPlugin) {
glob.sync(`${dllPlugin.path}/*.dll.js`).forEach(dllPath => {
plugins.push(
new AddAssetHtmlPlugin({
filepath: dllPath,
includeSourcemap: false,
}),
);
});
}
module.exports = require('./webpack.base.babel')({
mode: 'development',
// Add hot reloading in development
entry: [
'eventsource-polyfill', // Necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true',
path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
],
// Don't use hashes in dev mode for better performance
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
},
optimization: {
minimize: false,
},
// Add development plugins
plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define
// Emit a source map for easier debugging
// See https://webpack.js.org/configuration/devtool/#devtool
devtool: 'eval-source-map',
performance: {
hints: false,
},
});
function getDllManifests(dllManifests, dllPath) {
return dllManifests.map(manifestPath => {
if (!fs.existsSync(path)) {
if (!fs.existsSync(manifestPath)) {
logger.error(
`The following Webpack DLL manifest is missing: ${path.basename(
manifestPath,
)}`,
);
logger.error(`Expected to find it in ${dllPath}`);
logger.error('Please run: npm run build:dll');
process.exit(0);
}
}
return new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
});
});
}
/**
* Select which plugins to use to optimize the bundle's handling of
* third party dependencies.
*
* If there is a dllPlugin key on the project's package.json, the
* Webpack DLL Plugin will be used.
*
*/
function dependencyHandlers() {
// Don't do anything during the DLL Build step - process.env.BUILDING_DLL
// Don't do anything if package.json does not have a dllPlugin property - !dllPlugin
// Code splitting now included by default in Webpack 4 - !dllPlugin
if (process.env.BUILDING_DLL || !dllPlugin) {
return [];
}
const dllPath = path.resolve(
process.cwd(),
dllPlugin.path || 'node_modules/react-boilerplate-dlls',
);
/**
* If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json
* Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude
*/
if (!dllPlugin.dlls) {
const manifestPath = path.resolve(dllPath, 'reactBoilerplateDeps.json');
if (!fs.existsSync(manifestPath)) {
logger.error(
'The DLL manifest is missing. Please run `npm run build:dll`',
);
process.exit(0);
}
return [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
}),
];
}
// If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them.
const dllManifests = Object.keys(dllPlugin.dlls).map(name =>
path.join(dllPath, `/${name}.json`),
);
return getDllManifests(dllManifests, dllPath);
}