npm i webpack -g
npm i webpack-cli -g
1.2 新建需要打包的测试文件input.js
const sayHello = function() { console.log("sayHello"); }
webpack --mode development .\input.js -o .\bundle.js
2.1.1 新建需要打包的测试文件input.js
const sayHello = function() { console.log("sayHello"); }
2.1.2 配置webpack.config.js文件（entry：入口文件 output：输出文件）
const path = require("path");
// SPA(单文件打包)
module.exports = {
mode: ‘development‘,
entry: ‘./input.js‘,
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘bundle.js‘
}
}
webpack
2.2.1 新建需要打包的
测试文件home.js
const sayHello = function() { console.log("home"); }
测试文件other.js
const sayHello = function() { console.log("other"); }
测试文件about.js
const sayHello = function() { console.log("about"); }
2.2.2 配置webpack.config.js文件（entry：入口文件 output：输出文件）
const path = require("path");
// MPA(多文件打包)
module.exports = {
mode: ‘development‘,
entry: {
home: ‘./home.js‘,
about: ‘./about.js‘,
other: ‘./other.js‘
},
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘[name].bundle.js‘
}
}
webpack
npm init -y
npm i webpack
npm i webpack-cli
npm i webpack-dev-server
2.3.1.1配置webpack.config.js文件（entry：入口文件 output：输出文件）
const path = require("path");
module.exports = {
mode: ‘development‘,
entry: ‘./input.js‘,
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘bundle.js‘
}
}
2.3.1.2在package.json中添加
"dev": "webpack-dev-server --port 8080 --hot"
{ --open: 打开浏览器,
--port: 设置端口,
--contentBase: 默认打开文件夹路径,
--hot: 以补丁的形式添加新修改的代码 }
2.3.1.2 新建需要打包的测试文件input.js
const sayHello = function() { console.log("input"); }
npm run dev
2.3.2.2在package.json中添加
配置webpack.config.js文件（entry：入口文件 output：输出文件）
const path = require("path");
module.exports = {
mode: ‘development‘,
entry: ‘./input.js‘,
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘bundle.js‘
},
devServer: {
port: 8080,
compress: true,
hot: true
}
}
这种方式添加hot有可能报错，建议使用--hot（即第一种方式）
npm run dev
浏览器查看
原文：https://www.cnblogs.com/kinblog/p/11629168.html