三、webpack打包怎么指定index.html为网页模板

打包后,把打包后的文件塞到html里面,并把结果放到webpack打包输出后的文件夹下面
怎么指定src下的html文件
1.安装webpack的html插件
npm install html-webpack-plugin -D
详情见12注释

// webpack 是node写出来的  node的写法
let path = require('path');
// console.log(path.resolve('dist'))
let HtmlWebpackPlugin = require('html-webpack-plugin');		//----1----在这里引入模块

module.exports = {
     
    devServer: {
          //开发服务器的配置
        port: 3000,  //端口
        progress: true,  //打包进度条
        contentBase: './dist',    //以这个目录作为静态服务
        open: true,   //打包完成自动打开浏览器
        compress: false   //启用压缩
    },
    mode: 'development',    //模式  默认两种 生产:production 开发:development
    entry: './src/index.js',     //入口
    output: {
     
        filename: 'bundle.js',   //打包后的文件名称
        path: path.resolve(__dirname, 'dist'),  //路径必须是一个绝对路径,需要引入node的自带模块
    },
    plugins: [   //数组  放着所有的webpack插件
        new HtmlWebpackPlugin({
     		//----2----在这里配置使用模块
            template: './src/index.html',    //需要放打包文件的html模板路径
            filename: 'index.html'   //打包完成后的这个模板叫什么名字
        })
    ]
}

你可能感兴趣的:(webpack从零到一)