I found that there are lots of unfamiliar terms in Webpack configuration. When I first time encounter those terms, I read the official doc, examples, Stackoverflow, etc. I still have no idea what they are talking about, but I am able to find a better explanation in a Youtube video. This repository hosts video (mostly) and text explanation of a particular term in Webpack. Contribution is welcome and sorry about my English.
I realise that it is very important to know a particular term in deeper level.
Sample Webpack config file from here
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var extractPlugin = new ExtractTextPlugin({
filename: 'main.css'
});
module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// publicPath: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
]
},
{
test: /\.scss$/,
use: extractPlugin.extract({
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.(jpg|png)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/',
publicPath: 'img/'
}
}
]
}
]
},
plugins: [
extractPlugin,
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin(['dist'])
]
};
- WHAT IS WEBPACK, HOW DOES IT WORK? | Webpack 2 Basics Tutorial
- Front End Center — Webpack from First Principles
- THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial
- Starting point of your app.
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
- Webpack multiple entry points - ProgrammingTIL Webpack Video Tutorial Screencast 0004
- Webpack Config Basics - 3. Multiple entry points
- It require absolute path. Normally it uses path.join to resolve the absolute path.
- Output - Changing your bundle location!
/path/to/your/project/dist/bundle.js. It writes into disk.
- From my understanding is that, webpack dev server serves javascript, css etc from the
publicPath. Like how you define a localhost in your machine. - THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial . At around 6:48
- THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial. At around 7:44
- THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial. At around 10:51
- THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial. At around 11:11
- THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial. At round 12:10
- THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial. At round 14:23
- THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial. At round 15:28