Updated webpack config: added chunking, fixed environment variables
This commit is contained in:
Paul Graffam
parent
3a83436ef2
commit
672881cd86
|
|
@ -1,117 +1,137 @@
|
||||||
// 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
|
module.exports = env => {
|
||||||
var PROD = JSON.parse(process.env.NODE_ENV || 0);
|
// Dev environment
|
||||||
|
let devtool = 'eval';
|
||||||
|
let mode = 'development';
|
||||||
|
let stats = 'minimal';
|
||||||
|
let plugins = [
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
__ENV__: JSON.stringify(env.NODE_ENV)
|
||||||
|
})
|
||||||
|
];
|
||||||
|
|
||||||
// Dev environment
|
// Prod environment
|
||||||
var env = 'dev',
|
if (env.NODE_ENV === 'prod') {
|
||||||
time = Date.now(),
|
devtool = 'hidden-source-map';
|
||||||
devtool = 'eval',
|
mode = 'production';
|
||||||
mode = 'development',
|
stats = 'none';
|
||||||
stats = 'minimal',
|
outputPath = `${__dirname}/build/public/assets/js`;
|
||||||
plugins = [
|
}
|
||||||
//new webpack.NoErrorsPlugin(),
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
__ENV__: JSON.stringify(env),
|
|
||||||
___BUILD_TIME___: time
|
|
||||||
})
|
|
||||||
];
|
|
||||||
|
|
||||||
// Production environment
|
console.log('Webpack build -');
|
||||||
if(PROD) {
|
console.log(` - ENV: ${env.NODE_ENV}`);
|
||||||
env = 'prod';
|
console.log(` - outputPath ${outputPath}`);
|
||||||
devtool = 'hidden-source-map';
|
console.log(` - includePath ${includePath}`);
|
||||||
mode = 'production';
|
console.log(` - nodeModulesPath: ${nodeModulesPath}`);
|
||||||
stats = 'none';
|
|
||||||
outputPath = __dirname + '/build/public/assets/js';
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Webpack build - ENV: ' + env + ' V: ' + time);
|
return {
|
||||||
console.log(' - outputPath ', outputPath);
|
// Here the application starts executing
|
||||||
console.log(' - includePath ', includePath);
|
// and webpack starts bundling
|
||||||
console.log(' - nodeModulesPath ', nodeModulesPath);
|
entry: [
|
||||||
|
entry
|
||||||
module.exports = {
|
|
||||||
// Here the application starts executing
|
|
||||||
// and webpack starts bundling
|
|
||||||
entry: [
|
|
||||||
entry
|
|
||||||
],
|
|
||||||
|
|
||||||
// options related to how webpack emits results
|
|
||||||
output: {
|
|
||||||
// the target directory for all output files
|
|
||||||
// must be an absolute path (use the Node.js path module)
|
|
||||||
path: outputPath,
|
|
||||||
// the url to the output directory resolved relative to the HTML page
|
|
||||||
publicPath: 'assets/js',
|
|
||||||
// the filename template for entry chunks
|
|
||||||
filename: 'app.js'
|
|
||||||
},
|
|
||||||
|
|
||||||
mode: mode,
|
|
||||||
|
|
||||||
// configuration regarding modules
|
|
||||||
module: {
|
|
||||||
// rules for modules (configure loaders, parser options, etc.)
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
// these are matching conditions, each accepting a regular expression or string
|
|
||||||
// test and include have the same behavior, both must be matched
|
|
||||||
// exclude must not be matched (takes preference over test and include)
|
|
||||||
// Best practices:
|
|
||||||
// - Use RegExp only in test and for filename matching
|
|
||||||
// - Use arrays of absolute paths in include and exclude
|
|
||||||
// - Try to avoid exclude and prefer include
|
|
||||||
test: /\.js?$/,
|
|
||||||
// the loader which should be applied, it'll be resolved relative to the context
|
|
||||||
// -loader suffix is no longer optional in webpack2 for clarity reasons
|
|
||||||
// see webpack 1 upgrade guide
|
|
||||||
use: {
|
|
||||||
loader: 'babel-loader',
|
|
||||||
},
|
|
||||||
include: includePath,
|
|
||||||
exclude: nodeModulesPath,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
// options for resolving module requests
|
|
||||||
// (does not apply to resolving to loaders)
|
|
||||||
resolve: {
|
|
||||||
|
|
||||||
// directories where to look for modules,
|
|
||||||
modules: [
|
|
||||||
'node_modules',
|
|
||||||
path.resolve(__dirname, 'app')
|
|
||||||
],
|
],
|
||||||
|
|
||||||
// extensions that are used
|
// options related to how webpack emits results
|
||||||
extensions: ['.js', '.json', '.css'],
|
output: {
|
||||||
},
|
// the target directory for all output files
|
||||||
|
// must be an absolute path (use the Node.js path module)
|
||||||
|
path: outputPath,
|
||||||
|
// the url to the output directory resolved relative to the HTML page
|
||||||
|
publicPath: 'assets/js',
|
||||||
|
// the filename template for entry chunks
|
||||||
|
filename: 'app.js'
|
||||||
|
},
|
||||||
|
|
||||||
performance: {
|
// Webpack 4 mode helper
|
||||||
hints: 'warning' // enum
|
mode,
|
||||||
},
|
|
||||||
|
|
||||||
// lets you precisely control what bundle information gets displayed
|
// configuration regarding modules
|
||||||
stats: stats,
|
module: {
|
||||||
|
// rules for modules (configure loaders, parser options, etc.)
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
// these are matching conditions, each accepting a regular expression or string
|
||||||
|
// test and include have the same behavior, both must be matched
|
||||||
|
// exclude must not be matched (takes preference over test and include)
|
||||||
|
// Best practices:
|
||||||
|
// - Use RegExp only in test and for filename matching
|
||||||
|
// - Use arrays of absolute paths in include and exclude
|
||||||
|
// - Try to avoid exclude and prefer include
|
||||||
|
test: /\.js?$/,
|
||||||
|
// the loader which should be applied, it'll be resolved relative to the context
|
||||||
|
// -loader suffix is no longer optional in webpack2 for clarity reasons
|
||||||
|
// see webpack 1 upgrade guide
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
},
|
||||||
|
include: includePath,
|
||||||
|
exclude: nodeModulesPath,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [
|
||||||
|
'style-loader',
|
||||||
|
'css-loader',
|
||||||
|
'sass-loader'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
// enhance debugging by adding meta info for the browser devtools
|
// options for resolving module requests
|
||||||
// source-map most detailed at the expense of build speed.
|
// (does not apply to resolving to loaders)
|
||||||
devtool: devtool, // enum
|
resolve: {
|
||||||
|
// directories where to look for modules,
|
||||||
|
modules: [
|
||||||
|
'node_modules',
|
||||||
|
path.resolve(__dirname, 'app')
|
||||||
|
],
|
||||||
|
|
||||||
devServer: {
|
// extensions that are used
|
||||||
contentBase: 'src/public'
|
extensions: ['.js', '.json', '.css'],
|
||||||
},
|
},
|
||||||
|
|
||||||
plugins: plugins
|
performance: {
|
||||||
|
hints: 'warning'
|
||||||
|
},
|
||||||
|
|
||||||
|
// lets you precisely control what bundle information gets displayed
|
||||||
|
stats,
|
||||||
|
|
||||||
|
// enhance debugging by adding meta info for the browser devtools
|
||||||
|
// source-map most detailed at the expense of build speed.
|
||||||
|
devtool,
|
||||||
|
|
||||||
|
devServer: {
|
||||||
|
contentBase: 'src/public'
|
||||||
|
},
|
||||||
|
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue