WebPack Custom Package

OBJECT

1. Knownledge what is Webpack
2. Knownledge what is loader
3. Write custom webpack.config.js
   
   

What is webpack

At its core, webpack is a static module bundler for modern JavaScript applications.--official--Moulde is sources, bundle is result. Compress and rewrite all sources related to thier relations for making bundle.

How to work it

webpack-cli is command tool. install & exec below.

npm install webpack webpack-cli
npx webpack

Work in code possible. Espacially, When controling webpack carefully, likenext.js or 'CRA', exec webpack in code.

Basic setting (Webpack#1)

Webpack work with webpack.config.js. Set entry and output. input is start point of moudules, output is bundle.

const path = require('path');

module.exports = {
	entry : 'index.js',
	output : {
		filename : 'bundle.js',
		path : path.resolve(__dirname, 'dist')
	},
	mode : 'production', //default optimazation system applied
	optimization : { minimizer : []} //This is compress setting not working
}

Entry is first point of our program. all relation start this file. Output is bundle file. This file 'immediately invoked function expression' for runtime code.

Loader (Webpack#2)

Loader converts some modules(file) to some custom structive forms. For example, any file can convert js code with correct loader.

For making code to ES5 code, use babel. If you want to more information about babel, ref here. In webpack, use babel with babel-loader.

module.exports = {
	/* ... */
	module : {
		rules : [ // module rule setting
			{
				test : /\.js/, //all js file
				exclude : /node_modules/, //npm module excluing
				use: 'babel-loader'
			}
		]
	},
	mode : 'production'
}

Plugins (Webpack#3)

Plugin affect all session while running webpack, loader only specific modules.

For example, html-webpack-plugin automatically make html including bundle.js files.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	/* ... */
	plugins : [
		new CleanWebpackPlugin(), //clean dist directory
		new HtmlWebpackPlugin({
			template : './src/index.html'
		})
	]
}

Setting plugins in webpack.confing.js, index.html is made automatically.