1. Initialize first
npm init -y
Generate package.json file
2. Install webpack
npm install --dev webpack webpack-cli
The package.json file will add the dependencies attribute
Generate package-lock.json, node_modules files
3. Create the src folder in the root directory, and create index.js under src as the entry file.
4. Create webpack.config.js in the root directory as the webpack configuration file
5. Install style-loader css-loader
npm install --dev style-loader css-loader
6. Install html-webpack-plugin
Automatically generate index.html file
7. Install babel and transfer es6 syntax
npm install --dev babel-loader @babel/core @babel/preset-env
8. Install the plugin to compress js
npm install --dev terser-webpack-plugin
9. Install automatic compilation
npm install --dev webpack-dev-server
The script attribute configuration in package.json "start":"webpack serve --open"
10. Configure packaged js and add hash value in webpack.config.js
output:{
filename:"[name].[contenthash].js",
path:path.resolve(__dirname,"dist")
},
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const TerserPligin = require("terser-webpack-plugin")
module.exports = { mode:"development", devtool:"inline -source-map",//It is convenient to view the packaged source code entry:"./src/index.js", output:{ filename:"[name].[contenthash].js", path:path.resolve( __dirname,"dist") }, module:{//exclude Except for the js in node_modules, all others are escaped rules:[ { test:/\.css$/i, use:['style-loader','css- loader'] }, {
test:/\.(png|jpg|jpeg|gif|svg)$/i,
type:"asset/resource"
},
{
test:/\.js$/,
exclude:/node_modules/,
use:{
loader:"babel-loader",
options:{
presets:["@babel/preset-env"]
}
}
}
]
},
plugins:[//title 网站标题
new HtmlWebpackPlugin({
title:"哈哈"
})
],
optimization:{
minimize:true,
minimizer:[new TerserPligin()]
},
devServer:{
static:"./dist"
}
}
