青训营笔记

webpack的插件 。最常用的 webpack 插件有如下两个： ① webpack-dev-server 类似于 node.js阶段用到的nodemon 工具 每当修改了源代码， webpack 会自动进行项目的打包和构建 ② html-webpack-plugin webpack中的 HTML 插件（类似于一个模板引擎） 可以通过此插件自定制 index.html页面的内容 webpack-dev-server 可以让 webpack 监听项目源代码的变化 ，从而进行自动打包构建 。

安装 webpack-dev-server 运行如下的命令，即可在项目中安装此插件： npm i webpack-dev-server -D

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

② 再次运行 npm run dev 命令，重新进行项目的打包 ③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果 生成的bundle.js是虚拟的，输出在了项目的根目录中，webpack output is served from / 可以通过 http://localhost:8080/bundle.js 显示出来

// 加载和引用内存中的bundle.js 
<script src="/bundle.js"></script>

安装 html-webpack-plugin 运行如下的命令，即可在项目中安装此插件： npm i html-webpack-plugin -D

我们打包完后的http://localhost:8080 地址没有index.html页面，是一个根目录 html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。 需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！

//导入html插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html', //指定源文件的存放地址
    filename:'./index.html', //指定生成文件的存放路径
})
module.exports={
    // 代表webpack运行的模式，可选值有两个 development 和 production
    mode:'development',
    plugins:[htmlPlugin], //通过plugins节点，使htmlPlugin插件生效
    
}

解惑 html-webpack-plugin ① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中 ② HTML 插件在生成的 index.html 页面的底部，自动注入了打包的 bundle.js 文件 目的：我们访问http://localhost:8080的根目录就有了index.html，就可以直接显示出来

devServer节点 在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：

devServer:{
        open:true,//初次打包完成后，自动打开浏览器
        host:'127.0.0.1', //初次打包所使用的主机地址
        port:80,//实时打包所使用的端口号
    }