webpack 同一文件打包两次生成两个文件

最新推荐文章于 2024-06-04 22:19:33 发布
最新推荐文章于 2024-06-04 22:19:33 发布
阅读量802 收藏
点赞数
文章标签： webpack javascript ViewUI
原文链接：http://www.cnblogs.com/hellosxs/p/11411028.html
版权

----------------------------------webpack.config.js-------------------------------------------------------

const config = {
    entry: {
        main: './src/index.js',
        sub: './src/index.js',
    },
    output: {
        publicPath:"http://www.baidu.com",   //当文件的静态资源在另外一个链接上的时候，可以通过设置publicPath来同一设置路径 效果如index.html
        filename: '[name].js',   //生成文件名称相互对应
        path: path.resolve(__dirname,'dist') //打包出来的文件放入dist目录下
    },
    plugins:[new HtmlWebpackPlugin({   //将打包出来的文件放入src/index.html文件中
        template:'src/index.html'
    }),new CleanWebpackPlugin(['dist'])],
    module: {
        rules: [
            {
                test: /\.jpg$/,   //这个配置是重点
                use: {
                    loader:"file-loader",
                    options:{
                        name:'[name].[ext]',  //打包出来的图片名字和后缀都和之前的一样，
                        outputPath:"images/" //打包出来的文件存放在dist/images文件夹中
                    }
                }
            },

        ]
    }
};

-----------------------------index.html----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="http://www.baidu.com/main.js"></script>
    <script type="text/javascript" src="http://www.baidu.com/sub.js"></script>
</body>
</html>

转载于:https://www.cnblogs.com/hellosxs/p/11411028.html

weixin_30258027
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何解决项目依赖重复打包问题
qq_39523606的博客
03-23 418
title: 如何解决项目依赖重复打包问题 tags: - webpack - vite categories: - 前端 author: 余腾靖 pubDatetime: 2024-03-22 由于最近面试经常被问到这个问题(简历上写了)，感觉答的时候不是很系统清晰，于是便有了这篇文章。 为啥对这个问题这么上心？ 在上家公司最后一段时间是做前端工程基建相关的，不说是最有成...
彻底解决 webpack 打包文件体积过大问题
08-30
本篇文章主要介绍了彻底解决 webpack 打包文件体积过大问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack将js打包后的map文件详解
10-18
下面小编就为大家分享一篇webpack将js打包后的map文件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
干货分享前端开发的必备技能--webpack打包
weixin_71171795的博客
11-27 2038
打包在我们开发的过程中是一个将复杂的代码使用node环境下的webpack工具包压缩为一个代码文件,大大减少了代码的空间占用,提高浏览器解析的速率使用方法
vue-cli前端项目清理打包文件
移动开发学习笔记
06-12 3100
const fs = require('fs') const path = require('path') //1.删除旧是目录；2.创建新目录。 function deleteFolder(path) { let files = [] if (fs.existsSync(path)) { files = fs.readdirSync(path)//同步版的 fs.exists，检测给定的路径是否存在。 files.forEach(file => { let cu
前端批量获取文件并打包压缩解决方案
web前端开发
06-11 512
作者 |xmanlin链接 | https://juejin.cn/post/6970866355977486349前言前端文件下载我相信很多小伙伴并不陌生，下载文件的形式也有很多，例如...
在多个文件中import同一个文件，webpack会多次打包吗
weixin_33962923的博客
03-01 1022
最近自己在练习写React,Vue的时候，会在不同的子组件中多次import同一个文件，例如：import React from 'react'、import Vue from 'vue'，引入的次数多了慢慢让我产生了疑惑，引入这么多次，webpack会多次打包吗？直觉告诉我webpack并不傻，不会愚蠢的打包多次使打包后的文件异常臃肿，...
Webpack打包图片资源
zouchangan的博客
08-29 324
Webpack打包图片资源路径不对,打包两次. 当在 webpack 5 中使用旧的 assets loader（如file-loader/url-loader/raw-loader等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为type: 'javascript/auto'来解决。如下: webpack.config.js module.exports = { modu...
webpack 保存文件后自动打包_细说前端自动化打包工具--webpack
weixin_42284052的博客
12-23 257
背景记得2004年的时候，互联网开发就是做网页，那时也没有前端和后端的区分，有时一个网站就是一些纯静态的html，通过链接组织在一起。用过Dreamweaver的都知道，做网页就像用word编辑文档一样。一个html页面，夹杂着css,javascript是再常见不过的事了。随着前端的不断发展，特别是单页应用的兴起，这种所见即所得的IDE工具，就渐渐地退出了前端的主流。一个应用，通常只有一个静态页...
Webpack5 file-loader、url-loader打包url引入一张图片生成两个图片，一个无法加载
wuyxinu的博客
02-16 1982
最近在学习webpack5 Webpack5 file-loader、url-loader打包url引入的图片生成两个图片，一个无法加载。 但是页面引入的却是这个无法加载的图片 就算是使用了file-loader的outputPath，也会发现，生成的无效图片并不会进入到outputPath中指定的路径里面。 问题原因： css-loader版本不同。 css-loader 6.0.0以上版本。对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由c
简单使用webpack打包文件的实现
10-16
主要介绍了简单使用webpack打包文件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack 单独打包指定JS文件的方法
10-18
下面小编就为大家分享一篇webpack 单独打包指定JS文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈webpack打包生成的bundle.js文件过大的问题
10-18
下面小编就为大家分享一篇浅谈webpack打包生成的bundle.js文件过大的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
webpack5打包工具的使用
weixin_43526403的博客
02-20 1003
webpack打包工具的使用
webpack怎么配置单页面或者多页面项目？
u010208165的博客
06-04 531
举个例子 => 你有这样一个项目架构├── config│ ├── webpack.config.js //webpack配置文件├── src│ └── view //页面部分│ ├── router //项目的路由│ ├── reducer //项目的redux仓库│ └── app.js //项目的入口文件├── public│ └── index.html //入口文件最后注入到的html。
前端面试题大合集7----模块化/工程化/ES6+标准
GodLoveMe的博客
05-28 642
传统的模块打包工具最终将所有的模块编译并生成一个庞大的bundle.js文件。通过使用不同的loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理，loader需要在webpack.config.js里单独用module进行配置。vue-loader、coffee-loader、babel-loader等可以将特定文件格式转成js模块、将其他语言转化为js语言和编译下一代js语言；样式：style-loader、css-loader、less-loader、sass-loader等；
路由懒加载
最新发布
m0_54007573的博客
06-04 176
路由懒加载
QtCreator调试运行工程报错，无法找到相关库的的解决方案
qq_17769915的博客
05-28 459
明明编译的时候能够正常通过，运行或者调试的时候找不到相关的库呢？先说结论，排除库本身的问题，归根结底，可能是我们的pro文件中，关于库链接的方式，不能够被qmake正常解析，或者使我们链接方式不规范，导致我们的库依赖路径无法正常添加到运行环境中（qtcreator 相关配置，正常情况下会把解析的依赖环境自动加入运行环境中），进而导致在点击运行或者调试时无法找到相关库。如果多个库都需要用该库，在相关库pro中添加以上片段即可，这样保证了链接库的一致性，同一工程中的同一种库链接的是不同路径下的库。
webpack + vue 打包生成公共配置文件
09-10
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，可以将多个模块打包成一个或多个静态资源文件。Vue 是一个流行的 JavaScript 框架，用于构建用户界面。 在将 Vue 项目打包时，可以使用 Webpack 来生成公共的配置文件，以便在不同的环境中共享和重复使用。 首先，可以创建一个名为 `webpack.base.config.js` 的公共配置文件。该文件会包含一些通用的配置，例如入口文件、输出路径、加载器、插件等。通常，会将所有环境共有的配置项放在这个文件中。例如： ```javascript module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, // 其他加载器规则... ], }, plugins: [ new VueLoaderPlugin(), // 其他插件... ], }; ``` 然后，在不同的环境配置文件（如 `webpack.dev.config.js`、`webpack.prod.config.js` 等）中，可以通过引入公共配置文件并进行合并来继承公共的配置。例如： ```javascript const merge = require('webpack-merge'); const baseConfig = require('./webpack.base.config.js'); module.exports = merge(baseConfig, { // 为开发环境或生产环境添加额外的配置项 }); ``` 这样，可以在不同的环境中共享公共配置，减少重复工作，并且方便管理和维护项目。 最后，可以使用命令行或配置文件来指定要使用的环境配置文件，以便在打包时根据不同的环境生成不同的配置。 通过使用 Webpack 生成公共配置文件，可以更好地组织和管理 Vue 项目的打包配置，提高开发效率，并且方便进行项目的扩展和维护。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值