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的页面