webpack中的插件

一、webpack插件的作用

通过安装和配置第三方插件，可以扩展webpack的能力，从而让webpack用起来更方便，最常用的weback插件有以下两个：

• webpack-dev-server

  类似于node.js阶段用到的nodemon工具

  每当修改了源代码，webpack会自动进行项目的打包和构建

• html-webpack-plugin

  webpack中的HTML插件(类似于一个模板引擎插件)

  可以通过此插件自定制index.html也免的内容

二、webpack-dev-server

1.运行下面的命令，可以在项目中安装此插件：

npm install webpack-dev-server@3.11.0 -D

2.配置 webpack-dev-server

修改package.json -> scripts 中的dev命令

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

再运行npm run dev 命令，重新进行项目的打包，之后更改源代码后进行保存，项目会自动打包

浏览器访问：http://localhost:8080，实时打包效果

注意：webpack-dev-server会启动一个实时打包的http服务器

3.打包生产的文件去哪里了？

1.不配置webpack-dev-server的情况下，webpack打包生产的文件，会存放到实际的物理磁盘上

严格遵守开发者在webpack.config.js中指定配置

根据output节点指定路径进行存放

2.配置webpack-dev-server的情况下，自动打包生产的文件放在了内存中

不在根据output节点指定的路径，存放到实际的物理磁盘上

提高了是啥打包的输出的性能，因为内存比物理磁盘速度要更快

4.生产到内存中的文件该如何访问？

webpack-dev-server生成到内存中的文件，默认放到了项目的根目录，而且是虚拟的，不可见的

<script src="/main.js"></script>  //  '/' 表示根目录

5.devServer节点

在webpack.config.js配置文件中，可以通过DevServer节点对webpack-dev-server插件进行更多配置

示例代码如下：

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

三、html-webpack-pulgin

html-webpack-pulgin 是webpack中的HTML插件，可以通过此插件自定制index.js页面的内容

需求：通过html-webpack-pulgin 插件，将src目录下的index.html首页，复制到项目根目录一份

1.安装html-webpack-pulgin

npm install html-webpack-plugin -D

2.配置html-webpack-pulgin

在webpack.config.js 配置：

// 1.导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2.创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template : './src/index.html', // 指定原文件的存放路径
    filename : './index.html', // 指定生成文件的存放路径
})
// 向外导出一个配置对象
module.exports = {
    mode: 'development', // mode 用来指定构建模式，可选值有 development和 production
    // 3. 通过 plugins节点， 使htmlPlugin 插件生效
    plugins: [htmlPlugin]
}

3.解惑html-webpack-pulgin

• 通过HTML插件复制到项目根目录的index.html页面，也被放到了内存中
• HTML插件在生成的index.html页面的底部，自动注入了打包的main.js文件