webpack最重要的是版本问题 要自己根据所学习的版本来配置环境

控制台输入webpack执行时

1首先 webpack发现我们没有指定入口和出口
2webpack去项目的根目录中查找一个叫做webpack.config.js的配置文件
3解析执行这个文件 解析执行完配置文件后得到了配置文件中导出的配置对象
4webpack拿到配置对象后就拿到了配置对象指定的入口和出口然后进行构建
5 webpack-dev-server帮我们打包生成的bundle.js 文件并没有存放到实际的物理磁盘上 而是直接托管到了电脑内存中所以我们在项目根目录中根本找不到这个bundle.js;
6我们可以认为webpack-dev-server把打包好的文件以一种虚拟的形式托管到了咱们项目的根目录中
虽然看不到但是可以认为 dis rec node_modules平级有一个看不见的文件叫bundle.js 原因是：
这样更快

const path = require(‘path’);
module.exports = {
entry: path.join(__dirname,’./src/js/main.js’), //要使用webpack打包哪个文件
output: {
path: path.join(__dirname, ‘./dist’), //指定打包的文件输出到哪个目录去
filename:‘bundle.js’ //指定输出的文件的名称
}
}

---

使用webpack-dev-server 这个工具来实现自动打包编译的功能

运行 cnpm i webpack-dev-server -D把这个工具安装当项目本地开发依赖
由于在项目中 本地安装的 —D 所以无法把他当做我们的脚本命令在终端中直接运行
只有那些安装到全局-g的工具才能在终端中正常执行
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”: “webpack-dev-server” 这个是package.json里的配置
},
jquery 3.2.1
webpack-dev-server 2.9.3
webpack 3.6.0
想要正常运行要在本地项目中安装webpack -D
全安装好后 npm ruan dev

然后通过给的端口号打开 http://localhost:8081/
改颜色后刷新发现没有变化 然后问题是我们页面引用的bundle.js与生成的并不是一个 而是新端口里面的 这个是根路径里面的bundle要改成这个

---