webpack 打包html文件

一时失言乱红尘 2023-01-09 03:43 244阅读 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 条评论，244人围观）

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

相关阅读

相关 webpack打包优化(webpack打包优化文件大小)

webpack 打包怎么优化的解决webpack打包的文件体积过大的问题：确实，每次打包从入口开始，会parse所有的依赖，多的时候竟然打包一次要2秒多，简直不能忍

喜欢ヅ旅行/ 2023年09月26日 14:37/ 0 赞/ 10 阅读

相关 webpack-开发环境-打包Html资源

webpack-开发环境-打包Html资源 1. 创建文件，如下图所示 ![在这里插入图片描述][20200324181556653.png] 2，下载安装plugi

深藏阁楼爱情的钟/ 2023年07月18日 06:18/ 0 赞/ 9 阅读

相关 webpack 打包html文件

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

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

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

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

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

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

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

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

相关 webpack打包文件过程

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

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

相关 Webpack打包HTML

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

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

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

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

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

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

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

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

相关 webpack4 打包html资源

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

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