自己从零开始搭建webpack项目

从0开始搭建webpack项目

1. 初始化项目
   需要先安装node，使用 npm init 初始化项目，按照提示输入信息，生成package.json，或者使用 npm init -y 生成文件，效果和每项都回车生成的内容一样
   
2. 安装webpack
   npm install webpack --save-dev 当前项目下安装
   npm install webpack -g 全局安装
   安装完之后会生成node_modules，git显示有2k+的文件修改，所以要想将/node_modules/文件夹过滤掉，不跟踪，新建.gitignore，把文件夹配置到这里
3. 根目录下两个js文件，index.js 里引用 util.js 导出的 function，新建webpack.config.js，主要配置包括entry, output, loader, plugins, mode
4. 在package.json scripts配置里增加语句

"scripts": {
    "dev": "webpack"
  },

直接在终端执行webpack命令，需要全局安装webpack，所以在这里增加了一个命令，npm run dev就可以

到这一步，已经可以编译并压缩js代码了，静态页面常常是从html开始，html页面应该怎么配置呢，在官网有一个处理html文件的插件，HtmlWebpackPlugin

webpack.config.js 这是最终的配置
第一张是打包前的html，通过配置template把js注入到了压缩后html中

这里的注释仍然存在

最后页面可以展示html中的内容，js中console的内容也可以正常打印出来