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

深藏阁楼爱情的钟 2023-07-18 06:18 19阅读 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 条评论，19人围观）

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

相关阅读

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

webpack-开发环境-打包其他资源 1，创建文件 ![在这里插入图片描述][20200324185411425.png] 2，修改webpack.config.

叁歲伎倆/ 2023年07月18日 06:20/ 0 赞/ 22 阅读

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

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

短命女/ 2023年07月18日 06:19/ 0 赞/ 26 阅读

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

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

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

相关 webpack开发环境基本配置,打包样式资源

webpack开发环境基本配置 1，创建配置文件 1.1 创建文件webpack.config.js 1.2 配置内容如下 const {resolve}

古城微笑少年丶/ 2023年07月18日 03:26/ 0 赞/ 23 阅读

相关 webpack 打包图片资源

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

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

相关 webpack 打包html文件

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

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

相关 webpack 打包样式资源

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

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

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

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

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

相关 Webpack打包HTML

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

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

相关 webpack4 打包html资源

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

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