【webpack】2、webpack插件使用

1、webpack-dev-server

该插件的作用类似于热更新，在不手动打包的情况下可以自动监控代码的改变。

• 安装
  npm install webpack-dev-server@3.11.2 -D
• 配置
  在package.json中添加新的脚本devs

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

• 运行
  npm run devs

• 原理
  使用webpack-dev-server打包时会启动一个http服务器，默认端口是8080。
  同时此时生成的main.js文件并没有放在物理磁盘上，而是放在内存中。
  所以在html界面中使用的js文件应该是内存中的main.js。
  错误引用：磁盘中的main.js

      <script src="../dist/main.js"></script>

正确引用：内存的main.js

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

2、html-webpack-plugin

在使用了webpack-dev-server后运行项目会启动一个http服务，端口是8080.但是进入服务后显示的是项目的目录结构，这不是我想看到的，此时可以使用html-webpack-plugin插件让服务的默认界面为html界面。

• 使用插件之前的localhost:8080界面：其实就是项目的目录
  
• 安装命令
  npm install html-webpack-plugin -D
• 配置

const HtmlPlugin = require("html-webpack-plugin")
//创建一个插件的对象
const htmlPlugin = new HtmlPlugin({
    template:"./src/index.html", //指定源文件的路径
    filenameL:"./indedx.html"//指定生成文件的路径，放在根目录下
})
module.exports={
    mode : 'development',
    entry: path.join(__dirname,"./src/index1.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"main.js"
    },
    //将插件的对象加入到webpack的插件中
    plugins:[htmlPlugin]
}

• 启动服务后再次访问localhost:8080后显示的就是index.html界面了。

devServer节点

作用：初次打包完成后，自动打开浏览器显示初始界面。
在webpack配置文件中添加devServer的配置。

module.exports={
    devServer:{
        open:true,
        port:8871,
        host:"127.0.0.1"
    }
}