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

叁歲伎倆 2023-07-18 06:20 20阅读 0赞

webpack-开发环境-打包其他资源  
1，创建文件  
![在这里插入图片描述][20200324185411425.png]  
2，修改webpack.config.js  
主要使用exclude关键字，代码如下

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: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          },
          // 打包其他资源(除了html/js/css资源以外的资源)
          {
            // 排除css/js/html资源
            exclude: /\.(css|js|html|less)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:10].[ext]'
            }
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html'
        })
      ],
      mode: 'development'
    };

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

[20200324185411425.png]: /images/20230528/995c0de48b394ba78391a8884be1e58e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230528/fa5592a7335f41e3848842979934f756.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 webpack 打包图片资源

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

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

相关 webpack 打包样式资源

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

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

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

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

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

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

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

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

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

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

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

相关 webpack4 打包字体图标等其他资源

iconfont举例 1、下载图标代码到本地 (1)查看iconfont.css中需要的字体图标后缀名 (2)打开下载代码

刺骨的言语ヽ痛彻心扉/ 2021年07月24日 20:15/ 0 赞/ 495 阅读