Vue学习篇-3、配置 html-webpack-plugin 生成预览页面

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

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

const path = require('path'); // 导入生成预览页面的插件，得到一个构造函数 const HtmlWebpackPlugin = require('html-webpack-plugin'); const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象 template: './src/index.html', // 指定要用到的模板文件 filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示 }) module.exports = { // 编译模式 mode: 'development', //development production entry: path.join(__dirname, './src/index.js'), //输入文件的路径 output: { path: path.join(__dirname, './dist'), //输出文件的存放路径 filename: 'bundle.js' //输出文件的名称 }, plugins: [htmlPlugin] // plugins 数组是 webpack 打包期间会用到的一些插件列表 }

三、运行 npm run dev

四、访问http://localhost:8080/，预览页面为index.html的页面