Skip to content
Permalink
Browse files

export a function from webpack.config.js

This lets us pass the `environment` variable when running webpack and
differentiate development builds from production builds
  • Loading branch information...
nicoqh committed Jun 3, 2019
1 parent 1434a09 commit 393b1080cdd604ba462241ea5c061a0f1606c560
Showing with 65 additions and 54 deletions.
  1. +2 −1 package.json
  2. +63 −53 webpack.config.js
@@ -1,6 +1,7 @@
{
"scripts": {
"dev": "webpack --config webpack.config.js"
"build": "webpack --env.environment=production --config webpack.config.js",
"dev": "webpack --env.environment=development --config webpack.config.js"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
@@ -4,64 +4,74 @@ const path = require('path');
const PATH_SOURCE = path.join(__dirname, './src');
const PATH_DIST = path.join(__dirname, './dist');

// Export a configuration object
module.exports = {
// Tell Webpack to do some optimizations for our environment (development
// or production). Webpack will enable certain plugins and set
// `process.env.NODE_ENV` according to the environment we specify.
// https://webpack.js.org/configuration/mode
mode: 'development',
// If we export a function, it will be passed two parameters, the first
// of which is the webpack command line environment option `--env`.
// `webpack --env.production` sets env.production = true
// `webpack --env.a = b` sets env.a = 'b'
// https://webpack.js.org/configuration/configuration-types#exporting-a-function
module.exports = env => {
const environment = env.environment;
const isProduction = environment === 'production';
const isDevelopment = environment === 'development';

// The point or points to enter the application. This is where Webpack will
// start. We generally have one entry point per HTML page. For single-page
// applications, this means one entry point. For traditional multi-page apps,
// we may have multiple entry points.
// https://webpack.js.org/concepts#entry
entry: [
path.join(PATH_SOURCE, './index.js'),
],
return {
// Tell Webpack to do some optimizations for our environment (development
// or production). Webpack will enable certain plugins and set
// `process.env.NODE_ENV` according to the environment we specify.
// https://webpack.js.org/configuration/mode
mode: environment,

// Tell Webpack where to emit the bundles it creates and how to name them.
// https://webpack.js.org/concepts#output
// https://webpack.js.org/configuration/output#output-filename
output: {
path: PATH_DIST,
filename: 'js/[name].[hash].js',
},
// The point or points to enter the application. This is where Webpack will
// start. We generally have one entry point per HTML page. For single-page
// applications, this means one entry point. For traditional multi-page apps,
// we may have multiple entry points.
// https://webpack.js.org/concepts#entry
entry: [
path.join(PATH_SOURCE, './index.js'),
],

// Tell Webpack where to emit the bundles it creates and how to name them.
// https://webpack.js.org/concepts#output
// https://webpack.js.org/configuration/output#output-filename
output: {
path: PATH_DIST,
filename: 'js/[name].[hash].js',
},

// Determine how the different types of modules will be treated.
// https://webpack.js.org/configuration/module
// https://webpack.js.org/concepts#loaders
module: {
rules: [
{
test: /\.js$/, // Apply this rule to files ending in .js
exclude: /node_modules/, // Don't apply to files residing in node_modules
use: { // Use the following loader and options
loader: 'babel-loader',
// We can pass options to both babel-loader and Babel. This option object
// will replace babel.config.js
options: {
presets: [
['@babel/preset-env', {
debug: true, // Output the targets/plugins used when compiling
// Determine how the different types of modules will be treated.
// https://webpack.js.org/configuration/module
// https://webpack.js.org/concepts#loaders
module: {
rules: [
{
test: /\.js$/, // Apply this rule to files ending in .js
exclude: /node_modules/, // Don't apply to files residing in node_modules
use: { // Use the following loader and options
loader: 'babel-loader',
// We can pass options to both babel-loader and Babel. This option object
// will replace babel.config.js
options: {
presets: [
['@babel/preset-env', {
debug: true, // Output the targets/plugins used when compiling

// Configure how @babel/preset-env handles polyfills from core-js.
// https://babeljs.io/docs/en/babel-preset-env
useBuiltIns: 'usage',
// Configure how @babel/preset-env handles polyfills from core-js.
// https://babeljs.io/docs/en/babel-preset-env
useBuiltIns: 'usage',

// Specify the core-js version. Must match the version in package.json
corejs: 3,
// Specify the core-js version. Must match the version in package.json
corejs: 3,

// Specify which environments we support/target for our project.
// (We have chosen to specify targets in .browserslistrc, so there
// is no need to do it here.)
// targets: "",
}],
],
},
// Specify which environments we support/target for our project.
// (We have chosen to specify targets in .browserslistrc, so there
// is no need to do it here.)
// targets: "",
}],
],
},
}
}
}
],
},
],
},
};
};

0 comments on commit 393b108

Please sign in to comment.
You can’t perform that action at this time.