配置 html-webpack-plugin 生成预览页面||配置自动打包相关的参数

配置 html-webpack-plugin 生成预览页面

① 运行 npm install html-webpack-plugin –D 命令，安装生成预览页面的插件

② 修改 webpack.config.js 文件头部区域，添加如下配置信息：

// 导入生成预览页面的插件，得到一个构造函数

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

const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象

    template: './src/index.html', // 指定要用到的模板文件

    filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示

})

③ 修改 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：

module.exports = {

    plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表

}

---

---

---

配置自动打包相关的参数

// package.json中的配置

// --open 打包完成后自动打开浏览器页面

// --host 配置 IP 地址

// --port 配置端口

"scripts": {

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"

},