Migrated webpack config to 4.0 version, restructured, added more options

This commit is contained in:
Paul Graffam 2018-02-25 19:31:45 -05:00
parent e183f91dee
commit cbfe38ac59
1 changed files with 65 additions and 32 deletions

View File

@ -12,12 +12,13 @@ var entry = './src/js/app.js',
var PROD = JSON.parse(process.env.NODE_ENV || 0);
// Dev environment
var env = 'dev',
time = Date.now(),
var env = 'dev',
time = Date.now(),
devtool = 'eval',
debug = true,
mode = 'development',
stats = 'minimal',
plugins = [
new webpack.NoErrorsPlugin(),
//new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
__ENV__: JSON.stringify(env),
___BUILD_TIME___: time
@ -28,20 +29,9 @@ var env = 'dev',
if(PROD) {
env = 'prod';
devtool = 'hidden-source-map';
debug = false;
mode = 'production';
stats = 'none';
outputPath = __dirname + '/build/public/assets/js';
uglifyOptions = {
sourceMap: false,
mangle: true,
compress: {
drop_console: true
},
output: {
comments: false
}
};
plugins.push(new webpack.optimize.UglifyJsPlugin(uglifyOptions));
}
console.log('Webpack build - ENV: ' + env + ' V: ' + time);
@ -50,35 +40,78 @@ console.log(' - includePath ', includePath);
console.log(' - nodeModulesPath ', nodeModulesPath);
module.exports = {
stats: {
colors: true
},
debug: debug,
devtool: devtool,
devServer: {
contentBase: 'src/public'
},
// 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: {
loaders: [
// 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?$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
// 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, nodeModulesPath
]
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
extensions: ['.js', '.json', '.css'],
},
performance: {
hints: 'warning' // enum
},
// lets you precisely control what bundle information gets displayed
stats: stats,
// enhance debugging by adding meta info for the browser devtools
// source-map most detailed at the expense of build speed.
devtool: devtool, // enum
devServer: {
contentBase: 'src/public'
},
plugins: plugins
};