Path configuration
Later, we want to separate images, CSS, fonts to other bundles to use caching. We need to organise the directory structure for that.
We add a path to the webpack config.
Add
path, and publicPath definitions.
// **** webpack.config.babel.js ****
const webpackValidator = require('webpack-validator')
const {resolve} = require('path')
module.exports = env => {
return webpackValidator({
context: resolve('src'),
entry: './bootstrap.js',
output: {
filename: 'bundle.js',
// 1. ++++ put it in the dist
// you need to of course to update
// your html file
path: resolve('dist'),
// 2. ++++
// we need to add this to dev server
// otherwise it's serving from the
// root directory
publicPath: '/dist/',
},
})
}
publicPath can be dynamic.
Q&A: How to use Sass or PostCSS?
We will not cover it, because it's very easy. You need to add a loader to your loaders array.
Q&A: Caching strategies to speed up the build?
He will not cover this either, it's in the docs. The Webpack team is working on speeding up the caching so in the future you can expect even better speeds.
Q&A: Where went the dist directory?
The Dev Server is serving it from memory.
Converting an existing app to Webpack
Where you already have lots of script tags.
"It will fail".
The better approach is to iteratively include (refactor) more and more files. So at each iteration you have a working app where you can continue to add new features.
Q&A: path is absolute, but relativePath is relative? How to know?
You have to look at the docs. He will later show how to debug this Chrome Dev Tools.