简单Demo流程：
1.打包准备
mkdir webpack-demo && webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
2.项目结构
package.json
src
--index.js
dist
--index.html
3.安装jQuery
npm i jquery
4.src/index.js
const $ = require('jquery');
$(function(){
console.log('hahha');
})
5.在index.html中引入main.js
6.打包构建
npx webpack
7.最后访问index,html测试
8.注意：
main属性一般用于第三方包加载的入口模块声明
private:true 表示我们的项目设置为私有的，不是用于第三方包共享的
2.升级Demo
1.复制demo0到demo1
2.在demo1中新建一个webpack.config.js
webpack.config.js是webpack打包构建的配置文件
我们使用它的第一步就是导出一个对象
//node中的path模块是用来操作路径
//在node中进行读取文件读写的时候的目录是相对于执行node命令所处的路径
//解决这种问题的方法，将相对路径换成绝对路径
//node为每一个模块都提供了两个属性成员:
//双下划线
__filename：动态得到所执行js脚本文件所在目录的绝对路径
__dirname：动态得到所执行js脚本文件所在目录的绝对路径
时间久了就会觉得手动拼接路径很麻烦
所以node 和path模板中为您听提供了一个方法：join专门用于路径拼接
const path = require(' path ');
//导出的时候不能自己添加属性和值，会报错，只能按照webpack指定的属性来配置
module.exports = {
entry: ' ./src/main.js ', //指定打包的入口
output: { //指定打包的出口
path: path.join(_ _dirname,' ./abc/ ') , //指定打包的结果文件存放的目录路径（注意：必须是绝对路径）
filename: ' bundle.js ' //指定打包的结果文件名
}
}
}
//webpack打包的时候会自动读取webpack.config.js
//如果想要修改这个文件名
//则需要在执行打包命令的时候，加上 --config 配置文件名
例如：npx webpack --config webpack.config,js
//如果嫌弃每次都要输入这个命令麻烦的话，就可以将这个命令添加到package.json中添加到"scripts":{ "build" : "webpack --config webpack.config,js "
//注意：当你配置到package.json中，就不需要使用npx了
//因为webpack.config.js是默认文件名，所以可以直接写 "build" : "webpack "
3.