若有问题请看：
为什么使用Webpack
优点
- 模块化开发
- 编译typescript、ES6等高级js语法
- CSS预编译
- 快速引入静态文件
缺点：
- 网页加载速度慢， 因为 我们要发起很多的二次请求
- 要处理错综复杂的依赖关系
打包
把入口文件打包为目标文件
webpack4-
webpack 入口文件路径 目标文件
webpack4+
webpack 入口文件路径 -o 目标文件
全局下载webpack
原本是本地安装，通过 node_modules.bin目录可以使用webpack命令，但是在打包是总会报错
ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\VsCode\node_modules\.bin'
实属无奈，看了很多教程没法实现，基本上都是使用的全局安装
安装webpack4+
#安装方式默认安装最新版本
npm install webpack -g
npm install webpack-cli -g
可能有警告，但是问题不大，
默认情况下，这些文件会安装在
C:\Users\Lenovo\AppData\Roaming\npm\node_modules
但在安装配置nodejs是可以修改目录
第一个简单的打包
- 选择需要操作的文件夹，利用cmd到达该目录。输入
npm init -y #设置package文件
会产生一些配置信息，生成一个package.json
- 新建目录，可以不需要新建dist文件夹，打包成功会自动创建
image
注意：webpack4+可以不用配置webpack.config.js文件，默认的入口文件 /src/index.js，出口文件为 /dist/main.js
无需创建创建main.js，这是打包完成自动生产的文件
- 填写内容
//index.js文件
function hello(str) {
alert(str);
}
hello('hello world!');
- cmd中输入（注意要指定到对应的目录下）
webpack --mode production # 为生产构建启用许多优化
或者
webpack --mode development # 启用了有用的开发工具
自动打包,在dist中产生一个main.js文件
image
- 引用该文件
#新建一个html，位于src中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../dist/main.js"></script>
</body>
</html>
指定文件
官方配置信息 —— https://www.webpackjs.com/configuration/
可以通过配置 webpack.conf.js ，来指定引入文件和导出文件，或者其他操作
module.exports = {
entry: './src/th.js',//应用程序开始执行
output: {//文件出口
filename: 'bundle.js',//导出文件名称
}
}
打包文件：
// webpack.conf.js 可根据自己需要命名 打包方法是 --config 配置文件路径
webpack --mode production --config ./webpack.conf.js
其他
可以简化输入
webpack --mode production
webpack --mode development
在package.json中scripts中添加(注意结尾的符号，要不然会报错)
"dev": "webpack --mode development,
"build": "webpack --mode production
若添加有文件webpack.conf.js可以这样写：
"dev": "webpack --mode development --config ./webpack.conf.js",
"build": "webpack --mode production --config ./webpack.conf.js"
之后使用只需要cmd输,等效于原来的那一长串
npm run dev
或
npm run build
参考：
网友评论