webpack基本使用——配置生成预览页面

最新推荐文章于 2024-01-12 17:32:08 发布

原创最新推荐文章于 2024-01-12 17:32:08 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #nodejs #webpack

本文详细介绍了如何在Webpack配置中使用HTMLWebpackPlugin插件，包括安装步骤、在webpack.config.js中的配置示例以及执行流程。通过实例演示，读者可以掌握如何将首页模板集成并生成静态HTML文件。

安装

npm install  html-webpack-plugin -D

修改webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');//导入插件
const path = require('path');
//创建插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
template:'./src/index.html',//指定显示首页
filename: 'index.html'//指定名称，该文件存于内存中，目录中并不显示
})
module.exports = {
  mode: 'development',
  entry: path.join(__dirname, './src/index.js',
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [htmlPlugin]//plugins数组是webpack打包时用到的插件列表
};