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

深藏阁楼爱情的钟 2023-07-18 06:18 9阅读 0赞

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

1.  创建文件，如下图所示

![在这里插入图片描述][20200324181556653.png]  
2，下载安装plugin包

> npm install --save-dev html-webpack-plugin

3，修改配置文件 webpack.config.js

/*
      loader: 1. 下载   2. 使用（配置loader）
      plugins: 1. 下载  2. 引入  3. 使用
    */
    const { resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
      },
      module: {
        rules: [
          // loader的配置
        ]
      },
      plugins: [
        // plugins的配置
        // html-webpack-plugin
        // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
        // 需求：需要有结构的HTML文件
        new HtmlWebpackPlugin({
          // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
          template: './src/index.html'
        })
      ],
      mode: 'development'
    };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

4，运行指令：webpack

[20200324181556653.png]: /images/20230528/a783e65bd0d041c393112812e5a5a6f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230528/cf06f7fe50764cd68031c6fbcdd3c204.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 webpack 打包图片资源

webpack 打包图片资源 / loader: 1. 下载 2. 使用（配置） plugins：1. 下载 2. 引入 3.使用

野性酷女/ 2023年01月09日 03:54/ 0 赞/ 192 阅读

相关 webpack 打包html文件

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

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

相关 webpack 打包样式资源

webpack 打包样式资源 `webpack.config.js`配置文件内容为： // 用来拼接绝对路径的方法 const { re

￡神魔★判官ぃ/ 2023年01月09日 01:10/ 0 赞/ 184 阅读

相关 Webpack基本配置--打包资源

webpack打包资源笔记一、Webpack简介 1.1webpack是什么 Webpack是一种前端资源构建工具，一个静态资源打包器，在Webpack看来

浅浅的花香味﹌/ 2022年12月31日 01:19/ 0 赞/ 266 阅读

相关 Webpack 打包其他资源(详解)

打包其他资源需要安装的 > npm install --save-dev html-webpack-plugin 处理html > npm i url-loade

分手后的思念是犯贱/ 2022年10月06日 00:35/ 0 赞/ 214 阅读

相关【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？

webpack系列文章： [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -] [【Webpa

朴灿烈づ我的快乐病毒、/ 2022年09月05日 00:08/ 0 赞/ 126 阅读

相关 webpack打包图片资源说明

npm run build打包后，一些图是转为base64了，一些是在static/img文件夹。路径问题： 1、直接<img :src=''>引用修改方法：首先修改

亦凉/ 2022年06月01日 02:07/ 0 赞/ 294 阅读

相关 Webpack打包HTML

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

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

相关 webpack4 打包html资源

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

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