Webpack Instal Webpack Config
npx webpack-cli init
Kind Katipo
npx webpack-cli initwebpack --mode=development
webpack --mode=productionnpm install --save-dev webpack-dev-serverconst path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
print: './src/print.js',
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management',
+ }),
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};// webpack.config.js/**
* Webpack configuration.
*/const path = require( 'path' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const OptimizeCssAssetsPlugin = require( 'optimize-css-assets-webpack-plugin' );
const cssnano = require( 'cssnano' ); // https://cssnano.co/
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin' );// JS Directory path.
const JS_DIR = path.resolve( __dirname, 'src/js' );
const IMG_DIR = path.resolve( __dirname, 'src/img' );
const BUILD_DIR = path.resolve( __dirname, 'build' );const entry = {
main: JS_DIR + '/main.js',
single: JS_DIR + '/single.js',
};const output = {
path: BUILD_DIR,
filename: 'js/[name].js'
};/**
* Note: argv.mode will return 'development' or 'production'.
*/
const plugins = ( argv ) => [
new CleanWebpackPlugin( {
cleanStaleWebpackAssets: ( argv.mode === 'production' ) // Automatically remove all unused webpack assets on rebuild, when set to true in production. ( https://www.npmjs.com/package/clean-webpack-plugin#options-and-defaults-optional )
} ), new MiniCssExtractPlugin( {
filename: 'css/[name].css'
} ),
];const rules = [
{
test: /\.js$/,
include: [ JS_DIR ],
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
]
},
{
test: /\.(png|jpg|svg|jpeg|gif|ico)$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
}
}
},
];/**
* Since you may have to disambiguate in your webpack.config.js between development and production builds,
* you can export a function from your webpack configuration instead of exporting an object
*
* @param {string} env environment ( See the environment options CLI documentation for syntax examples. https://webpack.js.org/api/cli/#environment-options )
* @param argv options map ( This describes the options passed to webpack, with keys such as output-filename and optimize-minimize )
* @return {{output: *, devtool: string, entry: *, optimization: {minimizer: [*, *]}, plugins: *, module: {rules: *}, externals: {jquery: string}}}
*
* @see https://webpack.js.org/configuration/configuration-types/#exporting-a-function
*/
module.exports = ( env, argv ) => ({ entry: entry, output: output, /**
* A full SourceMap is emitted as a separate file ( e.g. main.js.map )
* It adds a reference comment to the bundle so development tools know where to find it.
* set this to false if you don't need it
*/
devtool: 'source-map', module: {
rules: rules,
}, optimization: {
minimizer: [
new OptimizeCssAssetsPlugin( {
cssProcessor: cssnano
} ), new UglifyJsPlugin( {
cache: false,
parallel: true,
sourceMap: false
} )
]
}, plugins: plugins( argv ), externals: {
jquery: 'jQuery'
}
});const path = require('path');
// include the js minification plugin
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
// include the css extraction and minification plugins
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: ['./js/src/app.js', './css/src/app.scss'],
output: {
filename: './js/build/app.js',
path: path.resolve(__dirname)
},
module: {
rules: [
// perform js babelization on all .js files
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['babel-preset-env']
}
}
},
// compile all .scss files to plain old css
{
test: /\.(sass|scss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins: [
// extract css into dedicated file
new MiniCssExtractPlugin({
filename: './css/build/main.min.css'
})
],
optimization: {
minimizer: [
// enable the js minification plugin
new UglifyJSPlugin({
cache: true,
parallel: true
}),
// enable the css minification plugin
new OptimizeCSSAssetsPlugin({})
]
}
};