webpack打包工具2

接上一篇：

问题描述：在这之前，当我们代码有所变动，需要查看效果时，都需要输入完整的打包命令，难免会显得繁琐一些。

1. 首先需要在根目录下创建一个 webpack.config.js 文件
   在该文件中将 main.js 的入口和出口文件打包
   
   注意：将来的开发中几乎都在使用webpack.config.js配置文件来打包，我们需要熟练将其写出。

2. 在终端直接运行webpack即可
   
   如上图，表示运行成功了。

   webpack原理： 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口 然后，当我们输入webpack命令后， webpack就会去项目的根目录中，查找一个叫做 `webpack.config.js` 的配置文件 当找到配置文件后，webpack 会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建；

改进： 希望当我们保存代码后，不用人为去执行命令就能够实现打包。

解决方案：我们需要安装webpack-dev-server这个工具，来实现自动打包编译功能

1. 运行 npm i webpack-dev-server -D (-D表示在项目中安装)

2. 安装完成之后，该工具的用法和webpack的命令用法完全一样
   
   nodemon 可以无缝的执行 node 命令，同理后者也是。
   注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack

3. 由于，我们是在项目中，本地安装的 webpack-dev-server ， 所以，无法把它当作 脚本命令，在powershell 终端中直接运行；（只有那些 安装到 全局 -g 的工具，才能在终端中正常执行） 但是该工具只能在本地项目中安装

4. 解决 webpack-dev-server 工具的问题：
   –在package.json中写入如下脚本dev实现实时打包：
   注意：.json 文件中不能够出现注释
   注意：dev 还可以写成如下方式：
   “dev”: “webpack-dev-server --open --port 3000 --contentBase src --hot”
   –open 表示执行打包命令后就可以直接打开浏览器，无需人为操作。
   –port 表示打开浏览器后的端口号
   –contentBase src 表示打开浏览器显示的默认页面
   –hot 表示热重载、热更新，即无需更新就可以渲染页面
   

5. 执行 npm run dev 或者 npm start（相当于是启动服务，可以使用 Ctrl c 来退出当前命令）即可
   注意：该过程中如果报错，不必担心，我们只需要将项目中的 node_modules 文件夹删除即可，然后在终端重新执行 cnpm i （表示重新下载所有的资源文件包）
   当出现如下警告的时候，按照警告提示继续安装 webpack、webpack-cli 即可。
   
   注意：此刻我们执行的文件不在是从文件夹中拖到浏览器中的 index.html 文件了，而是 localhost:8080 下的文件。
   当使用了 webpack-dev-server 工具时，项目中 dist 文件下打包好的文件 bundle.js 就可以删除掉了。

6. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到 实际的物理磁盘上 注意：此处提到的物理磁盘就是在 dist 目录下的 bundle.js 文件；而是，直接托管到了 电脑的内存中（目的：提高磁盘访问速率），所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js; 注意：我们可以通过 localhost:8080/bundle.js 来访问 bundle.js 文件，如下图：
   
   最后我们还需要将 index.html 文件中引入 bundle.js 文件路径进行修改。

<script src="/bundle.js"></script>

7. 最后总结：我们可以认为， webpack-dev-server 把打包好的 文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到它，但是，可以认为， 和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js。

补充：

描述：有时我们不想去手动的处理 bundle.js 文件，因此我们可以安装插件（html-webpack-plugin）来帮我自动处理

1. 在项目中安装插件
   
2. 在 webpack.config.js 中配置

//导入内存中生成 HTML页面的插件
//注意：只要是插件，都需要放到 plugins 节点中去
const htmlWebpackPlugin = require('html-webpack-plugin');

//这是一个配置文件，本质是一个js文件，通过Node中的模块操作，向外暴露一个配置对象
module.exports = {
    //在这儿需要手动的指定 入口 和 出口文件
    entry: path.join(__dirname, '/src/main.js'),   //入口，表示webpack要打包的哪个文件
    output:{   //输出文件相关的配置
        path: path.join(__dirname, './dist'),   //指定打包好的文件输出到哪个目录中去
        filename: 'bundle.js',    //这是指定输出的文件名称
    },
    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template:path.join(__dirname, '/src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ]
}