今天主要研究了下webpack的基本配置
1.首先新建一个文件夹webpack-test，执行命令行 npm init -y（如果你创建的文件名称为中文或者包含中文，就不能用-y命令了）
这时文件根目录下多一个配置文件，package.json
2.新建文件夹src，用于存放源代码，在src下新建 1.index.html作为项目首页，2.main.js作为项目的JS入口文件
3.运行命令行，webpack ./src/main.js -o ./dist/bundle.js --mode development,把main.js文件打包到dist文件夹下的bundle.js中
成功后文件根目录下多了一个dist文件夹，并且里面有一个bundle.js文件，这个dist文件夹用于存放打包输出的文件
4.查看是否打包成功，在index.html中引入bundle.js
页面可以输出，说明打包成功
这样的话 全局打包就完成了，但是有一点不好就是每次修改，都要再走这个打包的过程，很烦
5.如果想让他自动打包，需要安装一个工具webpack-dev-server（这个工具可以帮我们进行实时打包）,运行 cnpm i webpack-dev-server -D
这里提示说需要安装webpack，我在上一次的分享中也提到，使用webpack-dev-server依赖于本地的webpack，需要在本地项目中安装webpack即运行cnpm i webpack -D
6.在项目根目录中新建webpack.config.js文件
当以命令行形式运行webpack 或者 webpack-dev-serve 工具的时候，会发现我们并没有提供要打包的文件的入口 和出口文件，此时，它会检查根目录中的配置文件webpack.config.js，并读取这个文件，拿到这个配置对象，然后根据这个对象进行打包构建
7.运行 webpack 打包
在配置文件package.json，添加脚本
1>自动打开
2>设置端口为6060
3>设置默认打开路径为src
4>启用热重载，热更新
8.运行npm run dev 报错
提示未安装webpack-cli，运行npm i webpack-cli -D，还是报错
查了下资料，说把node_modules删了，cnpm install 就可以了,试了下 ，果然就好了，控制台还在报错
此时项目托管在根路径
但是我在文件中引入的方式还是以本地为准
所以此时不能这样写了 ，要不然改成<script src="/bundle.js"></script>根目录下的包，要不然注释了，用html-webpack-plugin来实现，他可以在内存中，根据指定的模板文件，生成一份内存中的首页，同时自动把打包好的bundle.js 注入到页面的底部
9.运行cnpm i html-webpack-plugin -D 安装，然后在webpack.config.js中配置，如果要配置插件，需要在导出的对象中，挂载一个plugins节点
10.npm run dev 运行项目，成功打包
