1.使用npm安装webpack，在工程根目录路径栏输入cmd回车，输入
1 npm init -y 2 npm i webpack webpack@cli -D
安装过慢可以用淘宝镜像cnpm
2.创建webpack.config.js配置文件，
module.exports = { //开发过程用development，打包速度快，体积大 //上线用production，打包速度慢，体积很小（压缩） mode:‘development‘ //entry指定入口文件 entry: path.join(__dirname, ‘./src/index.js‘), //output制定输出文件地址和名称 output: { path: path.join(__dirname, ‘/dist‘), fliename: ‘xxx.js‘ } }
3.webpack插件安装
（1）webpack-dev-server 修改源码后自动运行
1 npm install webpack-dev-server@3.11.2 -D
packge.json配置：
"scripts": { "dev": "webpack serve" }
停止自动打包：两次ctrl+c
查看html用http://localhost:8080/
webpack-dev-server将js文件放进了内存中，存在但无法查看，在html中用/xxx.js引用，便可实时查看修改效果
（2）html-webpack-plugin 打开8080端口就打开首页面
1 npm install html-webpack-plugin@5.3.2 -D
webpack.config.js配置
const HtmlPlugin = require(‘html-webpack-plugin‘) const htmlPlugin = new HtmlPlugin({ template: ‘./src/index.html‘, filename: ‘.index.html‘ }) module.exports = { mode:‘development‘, plugins: [htmlPlugin], //entry指定入口文件 entry: path.join(__dirname, ‘./src/index.js‘), //output制定输出文件地址和名称 output: { path: path.join(__dirname, ‘/dist‘), fliename: ‘xxx.js‘ } }
4.其他设置：
（1）自动打开浏览器
1 devServer:{ 2 open:true, 3 host:‘127.0.0.1‘, 4 //http中80端口号可以被省略 5 port:80 6 }
（2）loader加载css等其他文件
（3）调试错误中的行号对应问题
nosource别人不能通过报错查看源码，保证安全性
devtool:‘nosource-source-map‘
5.生成到物理磁盘
"build": "webpack --mode production"
原文：https://www.cnblogs.com/shirayuki/p/15125762.html