webpack.config
webpack - common/dev/prod environments
webpack - helpers
webpack - plugins
webpac-dev-server

Webpack Config

In the package.json in any script that contains the command of "webpack", node will run the wepack
compiler using the webpack.config.js script, that should be in the root of project together with package.json file.

The webpack.config.js should export an object that complies with webpack object convention, and which will be
use by webpack to determine the steps to take to compile the project.

common/dev/prod environments

A preffered way to load the webpack object is by required environment, mainly production & development environments.
This is done by creating 3 seperate files (under root/config ), one is webpack.common to hold the common steps for both environments, a webpack.dev for the development environment and a webpack.production. both the webpack.dev and the webpack.prod will import the webpack.common and merge it with their own object.

Then in the package.json you could either define two different scripts for dev & production, each will import specifically from either the webpack.prod or the webpack.dev by path. example:
"build": " webpack --config config/webpack.prod.js --progress --profile --bail",
"build:dev": "webpack --config config/webpack.dev.js --progress --profile"

Or you could pass the arguments to webpack inside the package.json script itself. example:

webpack --env.NODE_ENV=local --env.production --progress

You can see in the example above the part that says: --env.NODE_ENV=local
which assign a local value to nodes NODE_ENV variable, and the part that says: --env.production
which creates a production veriable but leaves it empty.
But there a little bit more to it... in order for this to work we need to adjust the webpack.config.js to export a function instead of an object.
This exported function will decide dynamically which object to return depending on the environment variable. example:

webpack.config.js
const path = require('path');
const dev = require('path/to/dev'); // object of common & dev
const prod = require('path/to/prod') // object of common & prod
module.exports = env => {
// Use env. here:
console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
console.log('Production: ', env.production); // true

if (env.production) {

return prod ;

} else {

return dev ;

}
};

Helpers

The helpers.js file contains helper functions to determine node related parameters, such as path resolving and other resolving functions that depend on the running machine node environment. example of this file:

helpers.js

var path = require('path');
var _root = path.resolve(__dirname, '..');
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [_root].concat(args));
}
exports.root = root;

You can see this file uses nodes path function to get the root path (where package json is), and then manipulates it using the root function which it exports.

example of use in webpack.common:

// html loader
{
test: /\.html$/,
  loader: 'raw-loader',
  exclude: [
helpers.root('src/index.html')
  ]
}

Plugins

Webpack offers a bunch of plugins to preforms operations on the pre/post compiled code such as: webpack-merge (merges webpack objects), extract-text-webpack-plugin (extracts text from files using a settings object and bundles it into a bundle).
And you can also define your own plugins using webpack.DefinePlugin

You use this plugins inside the plugins property of the webpack object, with the new operator (after all were building an object). example:

plugins: [
new ExtractTextPlugin('[name].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV),
'APP_CONFIG': JSON.stringify(APP_CONFIG)
}
})
]

*FOOT NOTE: REASERCH HOW TO DEFINE YOUR OWN WEBPACK PLUGINS

webpac-dev-server

the webpac-dev-server is a node_module installed seperatly, and a webpack-dev-middleware from webpack, which provides a development server with live reload.
it can take webpack params just the same way as webpack, and it has its own params for functionality such as what directories to listen to changes on.

*FOOT NOTE: RESEARCH ABOUT webpack-dev-middleware

Próximo

Anterior

DS Seed Project

Descrição