In this example we are going to create a production bundle using webpack.
We will start from 00-boilerplate
.
npm install
to install previous sample packages:
npm install
-
First, we will check the current
base
anddev
webpack configuration. -
Then, we need to add a new file
prod.js
usingproduction
mode:
./config/webpack/prod.js
const { merge } = require('webpack-merge');
const base = require('./base');
module.exports = merge(base, {
mode: 'production',
});
- As we did on
dev
, we have to configure the ouput:
./config/webpack/prod.js
const { merge } = require('webpack-merge');
const base = require('./base');
+ const helpers = require('./helpers');
module.exports = merge(base, {
mode: 'production',
+ output: {
+ path: helpers.resolveFromRootPath('dist'),
+ filename: './js/[name].[chunkhash].js',
+ },
});
NOTE: Remember to add
chunkhash
to avoid cache issues.
- Next one, it's apply same approach to images:
./config/webpack/prod.js
const { merge } = require('webpack-merge');
const base = require('./base');
const helpers = require('./helpers');
module.exports = merge(base, {
mode: 'production',
output: {
path: helpers.resolveFromRootPath('dist'),
filename: './js/[name].[chunkhash].js',
},
+ module: {
+ rules: [
+ {
+ test: /\.(png|jpg|gif|svg)$/,
+ loader: 'file-loader',
+ options: {
+ name: './images/[name].[hash].[ext]',
+ },
+ },
+ ],
+ },
});
- Finally, we will provide a different env variables for
production
:
./prod.env
NODE_ENV=production
ORGANIZATION=facebook
- And use it:
./config/webpack/prod.js
const { merge } = require('webpack-merge');
+ const Dotenv = require('dotenv-webpack');
const base = require('./base');
const helpers = require('./helpers');
module.exports = merge(base, {
mode: 'production',
output: {
path: helpers.resolveFromRootPath('dist'),
filename: './js/[name].[chunkhash].js',
},
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: './images/[name].[hash].[ext]',
},
},
],
},
+ plugins: [
+ new Dotenv({
+ path: 'prod.env',
+ }),
+ ],
});
- Now, we can add the
build
command:
./package.json
...
"scripts": {
"start": "run-p -l type-check:watch start:dev",
"start:dev": "webpack-dev-server --config ./config/webpack/dev.js",
+ "build": "run-p -l type-check build:prod",
+ "build:prod": "npm run clean && webpack --config ./config/webpack/prod.js",
"type-check": "tsc --noEmit",
"type-check:watch": "npm run type-check -- --watch",
"clean": "rimraf dist",
"test": "jest -c ./config/test/jest.js --verbose",
"test:watch": "npm run test -- --watchAll -i --no-cache"
},
- Run it:
npm run build
We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
Basefactor, consultancy by Lemoncode provides consultancy and coaching services.
Lemoncode provides training services.
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend