https://www.youtube.com/watch?v=MpGLUVbqoYQ&feature=youtu.be
Code and commits: https://github.com/Colt/webpack-demo-app
// webpack.config.js
module.exports = {
entry: "...",
output: {
filename: "main.[contentHash].js",
path: path.resolve(__dirname, "dist"),
},
mode: "development",
devtool: "none", // unwrap the produced eval code
module: {
// ...
}
}
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
// 'style-loader': use in development mode only
'style-loader', // step 3: inject styles into DOM as <style> tags
// for production use this instead 'style-loader'
MiniCssExtractPlugin.loader, // step 3: Extract css intro files
// which will be injected into head, before any JS loads
// in order to avoid flickering
'css-loader', // step 2: import css as a commonJS module
'sass-loader' // step 1: turns sass/scss into css
]
},
{
test: /\.html$/,
use: [ "html-loader" ] // <img src="imge.png"> --> required('./image.png')
// todo: can I do it this way?
// use: "html-loader"
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
// we could also set compression for images
loader: "file-loader",
options: "[name].[ext]", // options: "[name].[hash].[ext]" // for production
outputPath: "images"
}
// todo: can I do it this way?
// use: [{
// loader: "file-loader",
// options: "[name].[ext]", // options: "[name].[hash].[ext]" // for production
// outputPath: "images"
// }]
}
]
},
}
// webpack.config.js
module.exports = {
// ...
module: {
// ...
// for production only:
optimization: {
minimizer: [
// minify css in separate files
new OptimizeCssAssetsPugin(),
// minify css inside JS
new TerserWebpackPlugin()
]
},
plugins: [
// mini-css-extract-plugin
new MiniCssExtractPattern({
filename: "[name].[contentHash].css"
})
// only if I need an entry html file
// if I develop a library, I dont need a entry html file
new HtmlWebpackPlugin({
template: "./src/template.html", // any html file used as a template
// for the generated index.html
// for development only
minify: {
//removeAttributeQuotes: true, // I wouldn't do it
collapseWhitespace: true,
removeComments: true
}
}),
// use for production only, cuz in development, dist folder is in-memory
// and gets killed every time the dev-server is closed
new CleanWebpackPlugin(),
]
// ...
},
}
// webpack.config.js
const common = require("./webpack.common");
const merge = require("webpack-merge");
module.exports = merge(common,
{
entry: "...",
output: "...",
// ...
})
// package.js
{
//...
"scripts": {
"start": "webpack-dev-server --config webpack.dev.js --open", // in-memory dist folder
"build": "webpack --config webpack.prod.js" // physic dist folder
}
}
// package.js
// webpack.config.js