webpack配置文件的分离

最新推荐文章于 2022-10-12 13:32:13 发布
最新推荐文章于 2022-10-12 13:32:13 发布
阅读量184 收藏
点赞数
分类专栏： webpack 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuaishuaizhang8/article/details/107728370
版权
  1. webpack配置文件的分离
  2. 开发时依赖的一个配置文件
  3. 发布时依赖另一个配置文件
  4. 步骤1,创建一个build文件夹,
  5. 步骤2在里面创建一个base.config.js文件,配置开发和发布时都依赖的配置文件
  6. 步骤3,另在创建一个dev.config.js文件,开发时依赖
  7. 步骤4,另在创建一个prod.config.js文件,发布时依赖
  8. 在这里插入图片描述
    三个文件内分别是:
    base.config.js和webpack.config.js一样
    在这里插入图片描述
    dev.config.js文件内放开发时的文件依赖
    在这里插入图片描述
    prod.config.js文件内放js的压缩打包配置
    在这里插入图片描述
    然后再终端安装合并指令;
    npm install webpack-merge@4.1.5 --save-dev;

然后蛇者打包位置

在这里插入图片描述
并且在package.json文件内配置指令

在这里插入图片描述
然后,打包,执行命令,完事--------------------

shuaishuaizhang8
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一次Webpack配置文件的分离实战记录
12-09
前言 随着前端技术的发展，业务逻辑的增多及功能化的繁琐已经成为前端人员最烧脑...webpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立。 下面话不多说了，来一起看看详细的介绍吧 单个
Webpack高级学习：Include/Exclude
weixin_47295886的博客
03-24 1378
开发时我们需要使用第三方的库或插件，所有文件都下载到 node_modules 中了。而这些文件是不需要编译可以直接使用的。所以我们在对 js 文件处理时，要排除 node_modules 下面的文件，只是处理src下面的文件。开发时候不会引入第三方样式，样式在自己中没有在node_modules中。排除，除了 xxx 文件以外其他文件都处理‘js文件只有babel和eslint在干活。eslint也要写 不写默认也有这个效果。只处理js文件，样式文件不处理。包含，只处理 xxx 文件。
webpack4配置详解
wxl1390的博客
01-20 832
一、entry 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。 //方式一：单文件写法 entry: { index: './src/pages/route.js', //about: './src/pages/about.js', //other:()=>{...} } //方式二：多文件写法 entry:...
13个你应该知道的 Webpack 优化技巧
m0_64460287的博客
10-12 476
在这篇文章中，我将从三个方面分享一些我常用的技巧：提高优化速度压缩打包文件的大小改善用户体验。提高速度。
webpack配置文件的抽离
A____t的博客
04-26 1030
webpack.config.js文件的抽离
前端知识汇总【Webpack基础】
qq_44810886的博客
06-18 629
webpack学习笔记
前端工程化：创建项目，自动开发生成脚手架、webpack配置文件.zip
最新发布
01-16
前端工程化：创建项目，自动开发生成脚手架、webpack配置文件；开发完成后构建项目，进行压缩合并，并行生产环境和开发环境，构建前后端分离的中间层mock接口服务。集成vue，react等单页面spa环境以及集成jquery为...
webpack 代码分离优化快速指北
01-21
分离代码文件 在此之前，首先要知道经常配置的 output 中有关 filename 和 chunkFilename 的区别；简单来说在 entry 定义的入口文件走的就是 filename 配置项，在入口文件内部引入的通常情况下是 chunk，走 ...
Webpack性能优化 DLL 用法详解
12-12
前言 在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，我们希望能...要使用 DLLPlugin，需要额外新建一个配置文件。所以对于用这种方式打包的项目，一般会有下面两个配置文件 webpack.c
记一次Webpack配置文件的分离
weixin_33872566的博客
11-29 920
随着前端技术的发展，业务逻辑的增多及功能化的繁琐已经成为前端人员最烧脑的问题。前端自动化构建工具的出现，为前端人员带来了项目构建上的福音，成为每个前端工程师必回的技术栈，目前比较流行的Webpack以万物皆模块的思想构建我们的前端项目，同样也是笔者正在使用的一个前端自动化构建工具。 Webpack对于每个前端人员来说都不会怎么陌生，它将每一个静态文件当做一个模块，经过一系列的处理为我们整合出最后的...
webpack（九）：webpack配置文件的分离
wangdongm123的博客
01-31 497
在项目中创建build文件夹，创建base.config.js文件（存放公共的东西，开发时依赖，生产时依赖） 创建dev.config.js文件（存放开发时依赖的配置）： 创建prod.config.js文件（存放生产时依赖的配置） 所以，在开发时，配置文件就是base.config.js+dev.config.js 生产时，配置文件就是base.config.js+prod.config....
webpack代码分离的三种常用方法
xcxiang的博客
08-15 3962
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。 有三种常用的代码分离方法： 入口起点：使用 entry 配置手动地分离代码。 防止重复：使用 CommonsChunkPlugin 去重和分离 ch...
webpack 中 loader 配置项 exclude、include 对打包的影响
quanxin0222的博客
01-25 3123
这是在实际开发过程中遇到的问题。 遇到这个问题的契机： 我要开发一套底层框架，所有由此派生出的【一系列项目】可以直接引用这个项目，然后在此基础上添加业务。那么，ui 框架和 webpack 自然是不可或缺。于是，在配置这些 loader 的时候，因为为了让 webpack 更加高效，自然地使用了: exclude: /node_modules/, 这样的配置。 于是我将它作为底层依赖框架，新建了一个实际项目，然后通过 package.json 引入这个项目，从它里面导出 webpack.co
webpack使用exclude
weixin_30764771的博客
04-10 3384
在进行项目打包的时候，当使用babel-loader进行js兼容时，不需要将node_modules模块下的所有js文件进行打包。 转载于:https://www.cnblogs.com/cwxwdm/p/10685457.html...
webpack-配置文件的分离
<WRM>的博客
07-16 190
1.在根目录下新建一个文件夹build，在该文件夹下建立三个文件：base.config.js（公共）、prod.config.js（生产）、dev.config.js（开发） 2.在各个文件下添加相关的代码，例如： base.config.js: const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require("path"); const webpack = require("webpack"); const u
webpack4 配置文件分离
weixin_34250434的博客
01-24 475
webpack4 配置文件分离 关于mode webpack根据开发和生成环境一般可以将配置文件拆分，拆分dev和prod两种环境 |- package.json |- /build |- webpack.base.js |- webpack.dev.js |- webpack.prod.js 在scripts...
webpack配置的分离
ICanWin_lll的博客
01-23 468
webpack.config.js文件中的配置，有些是开发时需要生产环境不需要，比如webpack-dev-server,有些配置是开发环境不需要，生产环境需要，比如压缩js代码的配置，因此对这里的配置做一个分离。 base.config.js:用来放公共的配置，开发和生产环境都需要的配置 prod.config.js:只用在生产环境的配置 uglifyjsWenpackPlugin dev.congif.js:只用在开发环境的配置 devServer webpack-margin:对两个配置文..
（vue）webpack配置文件分离
黑胡子大叔的博客
10-25 373
小记 笔记 webpack配置文件分离 在开发活动中，开发中用到的插件和发布时用到的插件往往是不相同的，比如为了提高代码的简洁性，我们会在发布时，使用代码丑化插件将代码压缩；而在开发过程中，为了方便调试，是采用格式化后的代码。 因此配置文件也是不相同的，这也是我们配置文件分离的初衷。 安装配置 安装 npm install webpack-merge -D 将配置文件抽离 base.config.js: //导入path模块 const path=require('path') const {
webpack优化配置
08-20
webpack的优化配置包括通过配置`configureWebpack`和`chainWebpack`来修改webpack的默认配置，以实现不同的优化效果。 `configureWebpack`是用来修改webpack的配置，它的配置内容会与webpack的默认配置进行合并。通过配置`configureWebpack`，我们可以对webpack的各个方面进行优化，比如优化代码分离、减小打包体积、使用CDN服务器等。例如，你可以在`configureWebpack`中配置`optimization`选项来进行代码分离，通过指定`splitChunks`来实现将代码分离到不同的bundle中，从而按需加载或并行加载这些文件。 `chainWebpack`则可以修改webpack的默认配置。通过配置`chainWebpack`，我们可以自定义webpack的打包过程，进行一些特定的优化。例如，你可以使用`exclude`和`cache-loader`等选项来优化打包速度。 总的来说，webpack的优化配置可以分为两个方面：打包后的结果的性能优化和打包速度的优化。对于打包后的结果的性能优化，可以通过代码分离来实现。而对于打包速度的优化，可以利用webpack的默认优化配置，也可以根据项目的具体情况进行针对性的优化。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Webpack 配置优化](https://blog.csdn.net/weixin_42682011/article/details/116060572)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [webpack性能优化方案(详细)](https://blog.csdn.net/weixin_57677300/article/details/130684139)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Webpack优化配置缩小文件搜索范围](https://download.csdn.net/download/weixin_38698403/12766302)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值