webpack 插件（webpack-dev-server 和 html-webpack-plugin）

webpack插件

拓补 webpack 的能力。

主要插件有：

• webpack-dev-server
  • 修改源代码的时候，webpack 会自动进行项目的打包和构建
• html-webpack-plugin
  • HTML 插件（类似模块引擎插件）
  • 自定义 index.html 页面的内容

webpack-dev-server

安装

npm install webpack-dev-server@3.11.2 -D

配置

1. 修改 package.json -> script 中的命令

"scripts": {
   "dev": "webpack server"
}

1. 运行 npm run dev
2. 访问 http://localhost:8080

访问失败 Cannot GET /

根据官方文档，添加配置到webpack.config.js中

deeServer

devServer: {
  static: {
    directory: path.join(__dirname, ''),
  },
  compress: true,
  port: 9011,
},

修改 webpack.config.js 和 package.js 的配置文件时，必须重启服务器

• open:true | false -> 打包完成后是否启动服务器

访问

不能直接访问 webpack-dev-server。因为创建的服务器在内存中运行而不是在硬盘中运行。

// 访问内存中的文件
<script src="/bound.js"></srcipt>

html-webpack-plugin

复制 src 到根目录中 \

安装

npm install html-webpack-plugin -D

配置html-webpack-plugin

1. 在 webpack.config.js 导入 html 插件，得到构造函数

const HtmlPlugin = require('html-webpack-plugin')

2. 创建 HTML 插件实例对象

const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', // -> 原文件存在路径
    filename: './index.html'      // -> 指定生成的文件路径
})

3. 通过 plugin 节点，使 htmlPlugin 插件生效

module.exports={
   plugins:[htmlPlugin], 
   // -> 通过plugins 使 htmlPlugin 节点生效
}

1. 通过html 插件复制到项目根目录中的index.html页面中，也被放到内存中
2. html 插件生成的 index.html 页面，自动注入了打成 bundle.js 的文件