Build tools and pipelining
app.js
app.bundle.js
dist
require()
import
const path = require('path'); module.exports = { mode: 'development', entry: './app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.bundle.js' } };
webpack build
webpack-dev-server
html-plugin-webpack
let config = { ... devServer: { port: 9000, }, plugins: [ new HtmlWebpackPlugin({ template: path.join('src', 'index.template.html'), inject: 'body' }) ] }
babel-loader
.jsx
var config = { ... // resolve the file type resolve: { extensions: ['.js', '.json', '.jsx'] }, // Decide which loader to use for the file type module: { rules: [ { test: /\.jsx?$/, use: 'babel-loader' } ] } }
@babel/preset-react
@babel/preset-env
@babel/preset-typescript
terser-webpack-plugin
const TerserPlugin = require("terser-webpack-plugin"); var config = { ... } if (ENV === 'production') { config.optimization = Object.assign(config.optimization || {}, { minimize: true, minimizer: [new TerserPlugin()] }) }
html-webpack-plugin
var config = { ... output: { filename: 'app.[contenthash].bundle.js' } };
var config = { ... output: { filename: '[name].[contenthash].bundle.js' }, optimization: { splitChunks: { cacheGroups: { vendor: { name: 'vendor', chunks: 'all', test: /node_modules/ } }, } } }
var config = { ... devtool: 'eval' } // Other options can be found at // https://webpack.js.org/configuration/devtool/
css-loader
style-loader
postcss-loader