webpack配置详解

最新推荐文章于 2024-07-04 23:58:10 发布
最新推荐文章于 2024-07-04 23:58:10 发布
阅读量472 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Matildan/article/details/108062574
版权
本文详细解析webpack配置，包括path模块的使用，入口(entry)和出口(output)配置，以及如何优化打包过程，特别是利用DllPlugin处理第三方库以提高打包效率。
摘要由CSDN通过智能技术生成

webpack配置详解

1、首先建一个名叫“webpack.config.js”文件，在里面写webpack的配置信息。之前的文章我就已经写过一个简单的例子：
在这里插入图片描述
一、path = require(‘path’)理解
在这里我们可以注意到最新引用的path，它主要作用就是处理路径，2个常用的方法是path.join(path1[, …])和path.resolve([from …], to)。就我的理解join就是拼接2个字符。好比在一个路径下添加一个文件，resolve在某个路径找某个文件。
二、入口文件配置-entry
基本形式：entry:{key:value},其中key对应的是output中的[name]。key可以为简单的字符串如：app，index等；也可以为路径如：src/js/page/index.js。value可以为简单的字符串如路径；也可以为数组，数组中的文件一般是没有相互依赖关系的，但是又处于某些原因需要将它们打包在一起。
其中对于数组的作用：我们会将第三方npm包，一般我们不会进行修改而且它们之间也不存在依赖，所以我们一般会将它们打包在一起。例如：
在这里插入图片描述
上面entry的写法也是多入口的一种写法，最后会在dist下生成2个js文件：ind

最低0.47元/天 解锁文章
Matildan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack配置完全指南
gogo2027的博客
03-01 3397
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面：entryoutputmoderesolvemodulepluginsource map等，本文就来重点分析下这些部分。较小的输出包体积浏览器中更快的代码执行速度忽略开发中的代码不公开源代码或文件路径易于使用的输出资产浏览器调试工具快速增量编译可加快开发周期运行时提供有用的错误消息。
vue-cli中的webpack配置详解
08-29
"vue-cli中的webpack配置详解" vue-cli中的webpack配置详解是基于Vue.js框架的项目中最重要的一部分。Vue-cli是一个基于Webpack的项目脚手架，提供了许多有用的功能和配置项，以帮助开发者快速构建和部署Vue.js应用...
webpack4配置详解之逐行分析
weixin_34272308的博客
11-12 218
前言 　　经常会有群友问起webpack、react、redux、甚至create-react-app配置等等方面的问题，有些是我也不懂的，慢慢从大家的相互交流中，也学到了不少。 ​　　今天就尝试着一起来聊聊Webpack吧，旨在帮大家加深理解、新手更容易上路，都能从0到1搭建配置自定属于自己的脚手架，或对已封装好的脚手架有进一步的巩固...
Webpack配置全解析（基础篇）
最新发布
2401_85123750的博客
07-04 435
在上面的代码中我们发现都是手动来生成index.html，然后引入打包后的bundle文件，但是这样太过繁琐，而且如果生成的bundle文件引入了hash值，每次生成的文件名称不一样，因此我们需要一个自动生成html的插件；发现跟我们的源码差距还是挺大的，本来是一个简单add函数，通过webpack的模块封装，已经很难理解原来代码的含义了，因此，我们需要将编译后的代码映射回源码；在webpack2和webpack3中我们需要手动加入插件来进行代码的压缩、环境变量的定义，还需要注意环境的判断，十分的繁琐；
27、webpack的配置详解
伦伦的博客
04-18 929
1、webpack是什么？作用是什么？在项目中能解决什么样的问题？谈谈理解 答： （1）webpack是什么？ webpack是一种前端资源构建工具，一个静态资源模块打包器。在webpack来看，前端所有资源（js/json/css/less/img）等都会作为模块去处理，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle） （2）随着框架的诞生后，单页应用技术的流行，前端网页功能比较丰富，JavaScript的复杂度也随之增长，需要的依赖包也比较多，而且对于ES6+新语法，以及css
基于VUE项目，webpack配置详解.zip
02-19
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 ... 【项目质量】： 所有源码都经过严格测试，...
前端路由&webpack基础配置详解
10-16
在现代前端开发中，路由管理和构建工具配置是两个不可或缺的核心话题。本文将深入探讨前端路由的工作原理，以及如何使用webpack进行基础配置。...希望本文能帮助读者更好地理解前端路由及webpack配置的实际应用。
webpack配置之后端渲染详解
08-29
Webpack 配置之后端渲染详解 本文主要介绍了使用 Webpack 配置实现之后端渲染的方法和原理，涵盖了热加载、资源列表生成、模板变量引用等内容。下面是对文章中的知识点进行了详细的解释和分析。 Webpack 配置 ...
Webpack配置详解
GHkmmm的个人博客
08-03 219
Webpack相关文章 Webpack的基本使用 Webpack的性能优化 entry 1.string类型 单入口 打包形成一个chunk 输出一个bundle文件。此时chunk的默认名称是main module.exports = { entry: './src/index.js', ... } 2.array类型 多入口 所有入口文件最终只会形成-一个chunk,输出出去只有一个bundle文件 只有在HMR功能中让html热更新生效 module.exports = {
webpack配置
热门推荐
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
webpack入门学习1（环境搭建、entry、output、webpack-dev-server配置）
weixin_42292991的博客
10-04 336
webpack是什么？ webpack是一个Javacript应用程序得静态模块打包器 webpack有什么作用? 1.模块化打包 webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系，webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，最后将应用程序需要的每个模块打包成一个或者多个bundle。 Webpack环境配置和简单打包 1.安装node ...
webpack安装配置详解
iteye_944的博客
02-19 260
去年写过一篇webpack协助React js工作的简单例子。但是webpack的功能非常强大，并不是专门服务于React js的。之前对webpack理解很模糊，只能简单使用。最近参考其他一些文档教程，重新学习了解了一下webpack的功效。   Webpack简介 Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其他的一些浏览器不能...
webpack深入配置详解
qq_43305958的博客
09-08 158
webpack深入配置详解一、webpack是什么？二、使用步骤1.创建文件vue.config.js2.配置webpack总结 一、webpack是什么？ WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 a:模块化，让我们可以把复杂的程序细化为小的文件; b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能
说说如何配置 Webpack
weixin_33869377的博客
03-03 137
1 基本配置 Webpack 最关键的就是 webpack.config.js 配置文件，架构的好坏都体现在这个配置文件中。 我们在工程所在的根目录，新建一个 webpack.config.js，初始化为： var config = {}; module.exports = config; 复制代码 如果 IDE 安装了支持 ES6 的编译插件，那么这里就可以直接使用 ES6 的导出语法：exp...
webpack 配置详解
05-29
Webpack 是一个现代化的前端项目构建工具，它主要用于打包和优化 Web 应用程序的资源。通过使用模块化加载器和插件，Webpack 可以将多个模块打包成一个或多个单独的 JavaScript 文件。 Webpack 的配置文件是一个 JavaScript 模块，它需要导出一个对象。在配置文件中，你可以指定入口文件、输出路径、模块解析规则、插件等等。 以下是一个简单的 Webpack 配置示例： ``` const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [ // 插件配置 ], devtool: 'source-map' }; ``` 上述配置中，我们定义了入口文件为 `./src/index.js`，输出路径为 `dist/bundle.js`。我们还定义了两个模块解析规则，分别是使用 babel-loader 处理 JavaScript 文件和使用 style-loader 和 css-loader 处理 CSS 文件。最后，我们还添加了一个 Source Map 插件。 如果你想深入了解 Webpack 的配置，可以查看官方文档，或者参考其他开发者的博客或教程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值