webpack搭建项目--第一阶段

1. npm init-y 快速初始化项目
   

2. 在项目根目录创建src源代码目录和dist产品目录
   Src下新建index.html
   

3. 安装webpack cnpm install webpack --s –D

4. cnpm install webpack-cli --s –D (4.x版本以后需要安装)

5. 进行npx webpack打包命令的时候，出错,因为在4.xx版本之后，约定大于配置,即默认的入口文件是index.js而不再是main.js (所以新建的是index.js文件)

6. 新增webpack.config.js文件，在里面进行mode的配置(mode一般有2种,一个是development,另一个是production)再次执行打包命令，完成打包
   

完成打包后----打包的输出文件是dist下的main.js

7. 使用webpack-dev-server实现自动打包编译的功能 cnpm i webpack-dev-server --s

8. 在package.json文件中的scripts下新增dev节点

实现npm run dev 后出现以下页面

（打包的文件被托管於跟目录
)

9. Webpack-dev-server打包好的main.js是托管到了内存种，所以在项目根目录种看不到,但是我们可以认为在项目根目录种有一个看不见的main.js

修改src下的index.html种script的src路径为项目路径/mian.js

10. cnpm install html-webpack-plugin –s –D
    作用：将页面生成到内存中去,因为index.html默认在物理磁盘中

11. webpack.config.js文件中进行插件实列的创建且进行节点配置
    

12. 再次运行直接跳转页面
    此时body下会自动生成一个script标签