webpack打包多个文件

最新推荐文章于 2023-09-18 19:23:11 发布
最新推荐文章于 2023-09-18 19:23:11 发布
阅读量640 收藏
点赞数
分类专栏： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26386437/article/details/105145166
版权
vue 同时被 2 个专栏收录
19 篇文章 3 订阅
订阅专栏
webpack
1 篇文章 0 订阅
订阅专栏 
webpack.config.js


const pathlib = require('path')


module.exports={
    entry:{
        index:'./pages/index',
        pageA:'./pages/pageA'
    }
    output: {
        path:pathlib.resolve('dest/'),
        filename:'[name].bundle.js'
    }
}

filename的名字为entry入口输入的地址对应的名字

 

补充

webpack打包自定义名字的文件

webpage --config 文件名

 

 

上岸社社长
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈webpack打包之后的文件过大的解决方法
11-28
以前一直使用 create-react-app 这个脚手架进行 react 开发，后面因为一些自定义的配置，转而使用 webpack 搭建一套自己的脚手架。但是在使用 webpack 打包之后发现，纳尼？怎么文件这么大？？？ 于是研究了一下如何...
Webpack
qq_38367703的博客
09-16 871
Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。会以一个文件或多个文件作为打包的入口。
webpack打包出多文件——配置多入口和多出口
SilenceJude的博客
04-21 3721
前言： 有时候，我们发布一个npm包时，需要打包出多个文件，可能对应不同的功能。 这时就需要知道如何配置webpack打包出多文件，原理是通过配置多入口和多出口来实现。 一、打包成单文件配置 先看一下原来的打包单文件配置是啥样的。 const path = require('path'); module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, '../lib/'),
webpage打包index.html引入目录路径修改
echo_Ae的博客
08-01 2951
打包之后是这样的路径就不对的 我希望是   来到
Webpack配置entry修改入口文件或打包多个文件
最新发布
XunLin233的博客
09-18 506
当我们使用Webpack进行文件打包时，默认打包的文件是src文件下的index.js文件。
Webpack实现多页面打包
越陌度阡
01-09 1700
多页面应用(MPA)概念。单页面在开发时会把所有的业务放在一个大的入口里面去，不同的子业务还是同一个URL地址，只不过后面的hash会有所不同。多页面相对于单页面的区别在于，项目发布上线以后，有多个入口文件，每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站也就是多页面网站，也叫多页应用。多页面有什么优势呢？主要有以下两点：1. 多个页面之间是解耦的，利于维护；2. 多页面对SEO更加友好；
彻底解决 webpack 打包文件体积过大问题
12-09
下面就来讲下如何从多个方面进行优化。 去除不必要的插件 刚开始用 webpack 的时候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的插件，比如 ...
详解如何使用webpack打包多页jquery项目
11-30
1.为了将模块分割加载，不至于一个js文件过大，一个页面中使用多个js文件 2.由于是多页项目（多个html），每个页面使用的js文件都不一致 基于以上两点，需要配置多个入口文件 3.会把小图片转换成base64，所以可能css...
webpack多入口文件页面打包配置详解
08-28
本篇文章主要介绍了webpack多入口文件页面打包配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
10-17
本文通过两种方法给大家介绍了webpack打包时排除其中一个css、js文件，或单独打包一个css、js文件的方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Webpack打包-打包详细流程
weixin_40381947的博客
06-02 7154
Webpack是一个现代化的静态模块打包器，支持JavaScript、CSS、图片等资源的打包。它将所有模块及其依赖项视为静态资源，并创建一个依赖关系图，将这些资源转换为有效的输出文件。通过Webpack，可以将多个文件打包成一个或多个文件，并在网页中加载使用。 Webpack 支持各种开发场景和应用程序类型。在Webpack中，所有资源都被认为是模块，可通过引入其他模块而使用。Webpack提供了配置文件，允许开发人员自定义构建流程，以便灵活地满足各种场景的需求。Webpack 的功
我应该怎么使用webpack把多个js文件打包成一个文件
weixin_42593549的博客
01-15 1106
首先，您需要安装webpack和webpack-cli(使用npm或yarn进行安装)。然后，在项目的根目录中创建一个名为webpack.config.js的文件，在其中配置打包规则。 具体配置内容如下： constpath = require('path'); module.exports = { entry: './path/to/your/entry/file.js', outpu...
如何使用Webpack打包前端资源
m0_75198698的博客
05-03 236
Webpack是一种现代化的打包工具，可以将前端应用程序中的多个模块打包成单个文件。接下来，需要创建要打包的源文件。在此示例中，Webpack将打包src/index.js文件，并将打包文件输出到dist/bundle.js文件中。最后，将打包后的文件引入到HTML文件中。此命令将在dist目录中生成一个名为bundle.js的文件，其中包含了hello函数的代码。此示例创建一个名为hello的函数，并在该函数中调用console.log打印一条消息。## 步骤5：在HTML文件中使用打包文件。
webpack多进程打包
小菜鸟的博客
02-05 948
webpack打包
webpage结合Vue Loader打包单文件组件
啊对对对的博客
04-02 1393
npm insatll vue-loader vue-template-compiler webpage.config.js //引用node.js中的path模块，用来处理文件路径 const path = require("path"); //引入插件html-webpack-plugin const HtmlWebpackPlugin = require('html-webpack-plugin'); //1.添加vue-loader插件 const VueLoaderPlugin = re.
webpack使用
sandy_star
08-21 650
一、js文件的打包 1、现在的js文件中使用了模块化的方式进行开发，他们不可以直接使用 因为如果直接在index.html中引入这两个js文件，浏览器并不识别其中的模块化代码 另外，在真实项目中有很多这样的js文件，这样一个个引用的话在后期不方便对他们进行管理 2、使用webpack工具，对多个js文件进行打包 webpack就是一个大包工具，他支持我们代码中写模块化，可以对模块化的代码进行处理 另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得很方便了 在控制台输
webpack 打包library库
qq_32019935的博客
06-22 418
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 文章目录系列文章目录前言一、入口文件二.配置描述总结 前言 webpack打包一个库和打包一个项目并没有太大的区别。我们只需要将输出output进行一些配置即可 提示：以下是本篇文章正文内容，下面案例可供参考 一、入口文件 module.exports={ entry:"index.js",//入口文件 output:{ library:{ na
Webpack之打包library
小栗子的博客
08-05 986
Webpack之打包library一级目录 一级目录
webpack4打包多个js文件
热门推荐
骑着代码去流浪
07-19 2万+
默认文件目录： 1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js const path = require("path"); module.exports = { mode: "development", //打包为开发模式 // 入口配置的对象中，属性为输出的js文件名，属性值为入口文件 entry: { m...
webpack打包多个html页面
09-14
可以使用 webpack 来打包多个 HTML 页面。以下是一种常见的配置方法： 1. 首先，安装必要的 webpack 插件： ``` npm install html-webpack-plugin --save-dev ``` 2. 在 webpack.config.js 文件中配置多个页面： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { page1: './src/page1.js', page2: './src/page2.js', }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), }, plugins: [ new HtmlWebpackPlugin({ filename: 'page1.html', template: './src/page1.html', chunks: ['page1'], }), new HtmlWebpackPlugin({ filename: 'page2.html', template: './src/page2.html', chunks: ['page2'], }), ], }; ``` 在上述示例中，我们配置了两个入口文件（page1.js 和 page2.js），分别对应两个 HTML 页面（page1.html 和 page2.html）。每个 HtmlWebpackPlugin 实例都指定了生成的 HTML 文件名称、模板文件路径以及关联的入口文件。 3. 创建对应的 HTML 模板文件： 在 src 目录下创建 page1.html 和 page2.html 文件，可以在这里编写对应页面的 HTML 结构。 4. 运行打包命令： ``` npx webpack ``` 运行以上命令后，webpack 将会根据配置生成多个 HTML 文件，并将对应的 JavaScript 文件注入到相应的 HTML 页面中。最终打包好的文件将存储在 dist 目录下。 这样，你就可以通过配置多个 HtmlWebpackPlugin 实例来打包多个 HTML 页面。每个 HTML 页面可以关联不同的入口文件，实现灵活的页面打包配置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值