npm install webpack webpack-cli --save-dev
"scripts" : {
"build" : " webpack --config webpack.prod.js" ,
"build:dev" : " webpack --config webpack.config.js" ,
"dev" : " webpack serve --open"
},
❌ ReferenceError: regeneratorRuntime ❌
npm i regenerator-runtime --save
module . exports = {
entry : [ 'regenerator-runtime/runtime' , './src/index.js' ] ,
}
Development Dependencies --save-dev
npm i webpack webpack-cli html-loader html-webpack-plugin webpack-dev-server css-loader style-loader mini-css-extract-plugin file-loader copy-webpack-plugin css-minimizer-webpack-plugin terser-webpack-plugin babel-loader @babel/core @babel/preset-env --save-dev
const HtmlWebPackPlugin = require ( 'html-webpack-plugin' ) ;
const MiniCssExtractPlugin = require ( "mini-css-extract-plugin" ) ;
const CopyPlugin = require ( "copy-webpack-plugin" ) ;
module . exports = {
mode : 'development' ,
output :{
clean : true
} ,
module : {
rules : [
{
test : / \.html$/ i,
loader : 'html-loader' ,
options : {
minimize : false ,
sources : false ,
}
} ,
{
test : / \.css$/ i,
exclude : / styles.css$/ ,
use : [ 'style-loader' , 'css-loader' ]
} ,
{
test : / styles.css$/ ,
use : [ MiniCssExtractPlugin . loader , 'css-loader' ]
} ,
{
test : / \.(png|jpe?g|gif)$/ i,
use : [ { loader : 'file-loader' } ]
}
]
} ,
plugins : [
new HtmlWebPackPlugin ( {
template : './src/index.html' ,
filename : './index.html' ,
// inject: 'body'
} ) ,
new MiniCssExtractPlugin ( {
filename : '[name].css' ,
ignoreOrder : false
} ) ,
new CopyPlugin ( {
patterns : [
{ from : 'src/assets/' , to : 'assets/' }
]
} )
]
}
const HtmlWebPackPlugin = require ( 'html-webpack-plugin' ) ;
const MiniCssExtractPlugin = require ( "mini-css-extract-plugin" ) ;
const CopyPlugin = require ( "copy-webpack-plugin" ) ;
const CssMinimizer = require ( 'css-minimizer-webpack-plugin' ) ;
const Terser = require ( 'terser-webpack-plugin' ) ;
module . exports = {
mode : 'production' ,
output :{
clean : true ,
filename : '[name].[contenthash].js'
} ,
module : {
rules : [
{
test : / \.html$/ i,
loader : 'html-loader' ,
options : {
minimize : false ,
sources : false ,
}
} ,
{
test : / \.css$/ i,
exclude : / styles.css$/ ,
use : [ 'style-loader' , 'css-loader' ]
} ,
{
test : / styles.css$/ ,
use : [ MiniCssExtractPlugin . loader , 'css-loader' ]
} ,
{
test : / \.(png|jpe?g|gif)$/ i,
use : [ { loader : 'file-loader' } ]
} ,
{
test : / \.m?js$/ ,
exclude : / node_modules/ ,
use : {
loader : "babel-loader" ,
options : {
presets : [ '@babel/preset-env' ]
}
}
}
]
} ,
optimization : {
minimize : true ,
minimizer : [
new CssMinimizer ( ) ,
new Terser ( ) ,
]
} ,
plugins : [
new HtmlWebPackPlugin ( {
template : './src/index.html' ,
filename : './index.html' ,
// inject: 'body'
} ) ,
new MiniCssExtractPlugin ( {
filename : '[name].[fullhash].css' ,
ignoreOrder : false
} ) ,
new CopyPlugin ( {
patterns : [
{ from : 'src/assets/' , to : 'assets/' }
]
} )
]
}