参考：https://blog.csdn.net/qq_43682422/article/details/124054740
1 简介
在webpack官网有个图片，形象的展示了webpack的作用
webpack是一个模块化打包工具，其主要作用是对我们的项目进行文件归类、处理各个js之间的依赖、合并等操作，减少输出文件数量和大小，这样可以减少网站的请求数量和请求大小；
其次，webpack可以处理浏览器对ES5/ES6的兼容问题(通过将ES6代码编译为js代码)
2 全局安装webpack
npm i webpack -g
3 对项目文件进行打包
暂时把命令贴出来，具体js代码可以忽略不看
webpack ./src/main.js --output-filename bundle.js --output-path ./dist
这里，我们对main.js进行打包，设置其输出为/dist/bundle.js
4 实例
下面我们结合一个实例，说明为什么我们需要webpack，以及帮助我们理解webpack的原理
我们编写一个页面，这个页面中有10个li元素，我们希望间隔行变色显示
我们希望使用npm进行依赖包的管理，在项目根目录下执行 npm init 生成package.json
我们需要jquery包，我们执行 npm i jquery -S 进行依赖的安装
具体项目结构如下图所示
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
</body>
</html>
main.js
import $ from 'jquery'
$(function() {
$('li:odd').css('backgroundColor', 'lightblue')
$('li:odd').css('backgroundColor', function(){
return '#' + 'D97634'
})
})
然后我们在index.html中引入main.js，查看能否正确执行这个js
<script src="./main.js"></script>
我们会收到一个报错，这个报错的意思是，浏览器不认识ES6语法import
Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)
因此，我们必须使用webpack对main.js进行处理，处理方法为
webpack ./src/main.js --output-filename bundle.js --output-path ./dist
然后，我们会发现，dist路径下面多了一个bundle.js文件
然后，我们修改index.html中引入的js，改为引入bundle.js
<script src="../dist/bundle.js"></script>
然后，我们看到，效果出来了
5 webpack的功能
经过上面的例子，我们总结一下webpack的功能：
- webpack能够处理js文件的互相依赖关系
- webpack能够处理js的兼容问题，把高级的浏览器不识别的语法转化为低级的浏览器能够正常识别的语法
6 webpack.config.js
上例中，我们使用webpack打包时，需要带有文件名、输出目录、输出文件名等一大堆参数，我们希望通过配置文件，把需要打包的文件、输出路径、输出文件名配置到配置文件中，则我们就可以在项目根路径下创建webpack.config.js来达到目的
const path = require('path')
//nodejs的语法,这个配置文件其实就是一个js文件，通过Node中的模块操作，向外暴露了一个配置对象
module.exports = {
entry: path.join(__dirname, './src/main.js'),//入口，表示要使用webpack打包哪个文件
output: { //输出文件相关配置
path: path.join(__dirname, './dist'), //指定打包好的文件输出到哪个目录里面去
filename: 'bundle.js' //指定输出文件的名称
}
}
然后，我们只需执行 webpack 命令，就会实现打包目的。
当我们在命令行输出webpack命令后，做了如下几步
- 首先，webpack发现，我们并没有通过命令的形式给它指定入口和出口
- webpack就会去项目根路径下找一个叫做webpack.config.js的配置文件
- 当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中导出的配置对象
- 当webpack拿到了配置对象后，就拿到了配置文件中的入口和出口，然后进行打包操作
7 webpack-dev-server
上例中，我们修改玩代码后，需要手动执行webpack进行打包操作，我们希望修改完代码后，自动实现打包功能，我们需要借助于webpack-dev-server这个工具来实现。
安装方法：
npm -i webpack-dev-server -D
安装完毕后，这个工具的用法和webpack命令的用法完全一样，我们使用一下看看效果
不巧，报错了，这个报错是因为，我们powershell中不能执行本地安装的命令，只能执行全局-g安装的名令
解决方法是：我们在package.json中配置script脚本
"scripts": {
"dev": "webpack-dev-server"
},
然后我么执行 npm run dev
这次执行成功了，并且每次我们修改了代码，进行保存，webpack-dev-server将会自动为我们进行打包。
标签：教程,配置文件,li,webpack,js,我们,打包 From： https://www.cnblogs.com/zhenjingcool/p/16862263.html