webpack 打包html文件

一时失言乱红尘 2023-01-09 03:43 161阅读 0赞

# webpack 打包html文件 #

`webpack.config.js`配置文件内容为：

/**
     * loader: 1. 下载 2. 使用（配置）
     * plugins：1. 下载 2. 引入 3.使用
     */
    
    
    // 用来拼接绝对路径的方法
    const {
        resolve} = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    
    module.exports = {
        
        // webpack 配置
    
        // 入口起点
        entry : './src/index.js',
        // 输出
        output : {
        
            // 输出文件名
            filename : 'built.js',
            // 输出路径
            path : resolve(__dirname, 'dist')
        },
        // loader 配置
        module : {
        
            rules : [
                // 详细 loader 配置
            
            ]
        },
        // plugins 的配置
        plugins : [
            // 详细 plugins 的配置
            // html-webpack-plugin
            // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
            new HtmlWebpackPlugin({
        
                // 增加一个配置
                // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
                template : './src/index.html'
            })
        ],
        //模式
        mode : 'development', // 生产模式
        // mode : 'production' // 开发模式
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 打包html文件

webpack 打包html文件 `webpack.config.js`配置文件内容为： / loader: 1. 下载 2. 使用（配置）

一时失言乱红尘/ 2023年01月09日 03:43/ 0 赞/ 162 阅读

相关 webpack不打包mysql_简单使用webpack打包文件的实现

简单使用webpack打包文件的实现发布时间：2020-09-07 21:57:05 来源：脚本之家阅读：80 作者：逸轩没有安装node的同学请先安装node

快来打我*/ 2022年11月06日 00:03/ 0 赞/ 199 阅读

相关 webpack入门（六）：webpack 打包 css文件

上一篇，我们说了使用webpack.config.js 来设置webpack，而且之前我们也了解了如何打包 js 文件，现在我们看看如何打包 .css文件：老规矩，一步

朴灿烈づ我的快乐病毒、/ 2022年05月28日 00:39/ 0 赞/ 276 阅读

相关 webpack入门（四）：webpack打包 js 文件

我们首先知道webpack是处理 js 的工具，那么就不能处理 css 等其它文件了么？不是的，webpack可以通过 loader 处理很多类型的文件；我们

待我称王封你为后i/ 2022年05月28日 00:25/ 0 赞/ 377 阅读

相关 webpack打包文件过程

webpack打包 1)安装webpack $ npm install webpack webpack-cli --save-dev 2)添加配置文件 we

快来打我*/ 2022年05月08日 06:14/ 0 赞/ 256 阅读

相关 Webpack打包HTML

1、包装html-webpack-plugin插件并在webpack.config.js中添加插件 npm install html-webpack-plugin

忘是亡心i/ 2022年04月06日 08:12/ 0 赞/ 297 阅读

相关 2.【webpack】打包编译生成html

在上一篇中讲到了webpack的简单使用，从webpack的初始化，项目创建到项目编译，在本篇为大家讲解webpack如何打包html 目录 \------------

太过爱你忘了你带给我的痛/ 2022年01月11日 06:37/ 0 赞/ 439 阅读

相关 webpack打包（主要是处理html文件），并启动服务器

这篇文章主要说一下，如何在webpack打包过程中，处理html文件。项目目录结构 ![20190802195311514.png][] 现在需要，通过webpack打

迷南。/ 2021年11月09日 08:06/ 0 赞/ 193 阅读

相关 webpack4 打包样式文件

1、添加loader (1)下载对应loader包 (2)下载后,使用时要注意顺序 style-loader, 创建style标签,将j

￡神魔★判官ぃ/ 2021年07月24日 17:58/ 0 赞/ 358 阅读

相关 webpack4 打包html资源

1、下载插件 cnpm i -D html-webpack-plugin 2、引入插件 const X = require('ht

绝地灬酷狼/ 2021年07月24日 13:43/ 0 赞/ 470 阅读