Updated webpack config: added chunking, fixed environment variables

This commit is contained in:
Paul Graffam 2019-01-24 18:07:59 -05:00
parent 3a83436ef2
commit 672881cd86
1 changed files with 122 additions and 102 deletions

View File

@ -1,45 +1,40 @@
// Global imports // Global imports
var webpack = require('webpack'), const webpack = require('webpack');
path = require('path'); const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Paths // Paths
var entry = './src/js/app.js', const entry = './src/js/app.js';
includePath = path.join(__dirname, 'src/js'), const includePath = path.join(__dirname, 'src/js');
nodeModulesPath = path.join(__dirname, 'node_modules'), const nodeModulesPath = path.join(__dirname, 'node_modules');
outputPath = path.join(__dirname, 'src/public/assets/js'); let outputPath = path.join(__dirname, 'src/public/assets/js');
// Environment
var PROD = JSON.parse(process.env.NODE_ENV || 0);
module.exports = env => {
// Dev environment // Dev environment
var env = 'dev', let devtool = 'eval';
time = Date.now(), let mode = 'development';
devtool = 'eval', let stats = 'minimal';
mode = 'development', let plugins = [
stats = 'minimal',
plugins = [
//new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
__ENV__: JSON.stringify(env), __ENV__: JSON.stringify(env.NODE_ENV)
___BUILD_TIME___: time
}) })
]; ];
// Production environment // Prod environment
if(PROD) { if (env.NODE_ENV === 'prod') {
env = 'prod';
devtool = 'hidden-source-map'; devtool = 'hidden-source-map';
mode = 'production'; mode = 'production';
stats = 'none'; stats = 'none';
outputPath = __dirname + '/build/public/assets/js'; outputPath = `${__dirname}/build/public/assets/js`;
} }
console.log('Webpack build - ENV: ' + env + ' V: ' + time); console.log('Webpack build -');
console.log(' - outputPath ', outputPath); console.log(` - ENV: ${env.NODE_ENV}`);
console.log(' - includePath ', includePath); console.log(` - outputPath ${outputPath}`);
console.log(' - nodeModulesPath ', nodeModulesPath); console.log(` - includePath ${includePath}`);
console.log(` - nodeModulesPath: ${nodeModulesPath}`);
module.exports = { return {
// Here the application starts executing // Here the application starts executing
// and webpack starts bundling // and webpack starts bundling
entry: [ entry: [
@ -57,7 +52,8 @@ module.exports = {
filename: 'app.js' filename: 'app.js'
}, },
mode: mode, // Webpack 4 mode helper
mode,
// configuration regarding modules // configuration regarding modules
module: { module: {
@ -80,6 +76,14 @@ module.exports = {
}, },
include: includePath, include: includePath,
exclude: nodeModulesPath, exclude: nodeModulesPath,
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
} }
] ]
}, },
@ -87,7 +91,6 @@ module.exports = {
// options for resolving module requests // options for resolving module requests
// (does not apply to resolving to loaders) // (does not apply to resolving to loaders)
resolve: { resolve: {
// directories where to look for modules, // directories where to look for modules,
modules: [ modules: [
'node_modules', 'node_modules',
@ -99,19 +102,36 @@ module.exports = {
}, },
performance: { performance: {
hints: 'warning' // enum hints: 'warning'
}, },
// lets you precisely control what bundle information gets displayed // lets you precisely control what bundle information gets displayed
stats: stats, stats,
// enhance debugging by adding meta info for the browser devtools // enhance debugging by adding meta info for the browser devtools
// source-map most detailed at the expense of build speed. // source-map most detailed at the expense of build speed.
devtool: devtool, // enum devtool,
devServer: { devServer: {
contentBase: 'src/public' contentBase: 'src/public'
}, },
plugins: plugins plugins: plugins.concat(new HtmlWebpackPlugin({
template: './src/html/index.html',
filename: '../../index.html',
})),
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\\/]node_modules[\\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
}; };