- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端导学
webpack4 入门
源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/3
70430发布于 2019-10-08 - 来自专栏乱码李
webpack4 新特性
目前来说 webpack4 已经趋于稳定，很多关键的插件也都更新了对 webpack4 的支持；更为重要的是，webpack4 的官方文档（中英文）已经很完善了，因此现在不学习 webpack4，更待何时 关于 webpack4 全部新的特性可以查看官方的 releases。 ，我们可以使用 [email protected] 来体验 webpack4 的特性。 webpack4 升级建议 webpack4 依赖 node 版本 >= 6.11.5，node4 及其以下版本将不再支持。所以首先需要检查 node 是否需要升级。 webpack4 带来的变化 可能是受到 parcel（一款号称快速，零配置的 Web 应用程序打包器）的影响，webpack4 也引入了零配置的概念，遵从软件行业更先进的『规约大于配置』的理念。
1.6K20发布于 2021-11-26 - 来自专栏前端技术开发
webpack4配置学习(一)
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
75620发布于 2019-09-23 - 来自专栏江歌闲谈
Webpack4 性能优化实践
本文主要是自己平时的工作积累和参考别人的文章，而进行总结，基于 Webpack4 版本。 构建分析 编译速度分析 对 Webpack 构建速度进行优化的首要任务就是去知道哪些地方值得我们注意。 expensive loader (e.g babel-loader) ], }, ], }, }; 使用 hard-source-webpack-plugin 在 Webpack4 ></script> </head> <body>
</body> </html> JS 压缩 从 Webpack41.5K00发布于 2021-06-14 - 来自专栏小皮咖
Webpack4 搭建 Vue 项目
前言 由于 Parcel 打包工具的影响，webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。 本文就带你绕过 vue-cli，用 webpack4 一步步搭建 vue 项目。 注：（本文讲述的是webpack4基础配置，文章有点长，请耐心看完。 /dist') }, }); webpack4 增加了 mode 属性，设置为 development / production,以下是默认配置 development: process.env.NODE_ENV plugins: [ new CleanWebpackPlugin(['dist/*'], { root: path.resolve(__dirname, '../') }), ] 分离 CSS webpack4
1.4K10发布于 2019-11-05 - 来自专栏前端导学
webpack4使用笔记
如果要使用import scss的用法 ，可以在css-loader上添加 options属性 importLoaders 让import进来的css也能使用到postcss loader 和sass loader
1K20发布于 2020-04-24 - 来自专栏IMWeb前端团队
webpack4 使用指南
本文作者：IMWeb zixinfeng 原文出处：IMWeb社区 未经同意，禁止转载 webpack4 基础 npm init --yes yarn add webpack webpack-dev-server 注入脚本后文件的名称 inject: 'body', // 将脚本注入到body的底部 (head, true, body, false) }), ], }; 升级 零配置 零配置就意味着webpack4 mode development none production webpack4把很多插件相关的配置都迁移到了optimization中，但是我们看看官方文档对optimization的介绍简直寥寥无几 但是webpack4使用有些问题，所以官方推荐使用mini-css-extract-plugin。
1.1K40发布于 2019-12-03 - 来自专栏京程一灯
webpack4之原理分析
3.如果一个依赖module是动态引入的模块，那么就会根据这个module创建一个新的chunk，继续遍历依赖 4.重复上面过程，直到得到所有的chunks 全剧终 经过一周的时间，重新对这几年使用webpack4 的感悟进行整理，是时候和 webpack4 说再见了，希望以后不要再见了...
96530发布于 2020-12-15 - 来自专栏腾讯IVWEB团队的专栏
webpack4新特性介绍
本文，笔者将会全面介绍webpack4的新特性及实践。 备注：当使用webpack4时，确保使用 Node.js的版本 >= 8.9.4。因为webpack4使用了很多JS新的语法，它们在新版本的 v8 里经过了优化。 开箱即用WebAssembly WebAssembly(wasm)会带来运行时性能的大幅度提升，由于在社区的热度，webpack4对它做了开箱即用的支持。 支持多种模块类型 webpack4支持5种模块类型： javascript/auto: 在webpack3里，默认开启对所有模块系统的支持，包括CommonJS、AMD、ESM。 0CJS 0CJS的含义是0配置，webpack4受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。
1K10发布于 2020-06-24 - 来自专栏玩转大前端
Webpack4 常用配置详解
实现Webpack的打包最基本的就是配置好入口、出口，npm install webpack后在根目录创建webpack.config.js,代码如下：
2.1K30编辑于 2022-08-15 - 来自专栏京程一灯
重学webpack4之plugin开发
事件钩子会有不同的类型 SyncBailHook，AsyncSeriesHook，SyncHook等
73820发布于 2020-11-26 - 来自专栏禅境花园
webpack3 升级 webpack4
据说 webpack3 比 webpack4 编译速度将近快了 60%-80%， 成功升级之后，于是来记录下，项目主要是 vue ^2.5.9 ， webpack ^4.10.2 ， webpack-dev-sever
84720编辑于 2022-10-25 - 来自专栏腾讯IVWEB团队的专栏
webpack4 中如何实现资源内联？
今天就再系统的介绍下 Webpack4 里面资源内联(HTML/CSS/JS/Image/Font)的正确姿势吧！ 首先，我们一起了解下什么是资源内联。 什么是资源内联？ __inline"></script> 接下来，我们分别看看每种内联在 webpack4 中的实现。
1.5K20发布于 2020-06-28 - 来自专栏Elson's web
webpack4实用配置指南-上手篇
此次采用webpack4，也顺便尝尝鲜。 # webpack4 把命令行工具抽离成了独立包 webpack-cli npm install webpack webpack-cli -D 一、了解下webpack4的零配置 项目下没有webpack.config.js 情况下，命令行直接运行webpack，webpack4不再像webpack3一样，提示未找到配置文件： [dtmy4sy7fs.jpeg] 而是提示： [p5bwwjzw8o.jpeg] 修改后可以发现零配置下系统的默认配置为 BTW: 有了之前的html自动构建配置，抽离后的CSS也会自动引入 # @next为webpack4使用版本 npm install -D extract-text-webpack-plugin@next
5.2K170发布于 2018-06-19 - 来自专栏卡少编程之旅
webpack4配置入门和进阶
plugin的逻辑，来完成自定义的插件逻辑 基本的webpack配置搭建 首先通过以下的脚本命令来建立初始化文件： npm init -y npm i webpack webpack-cli -D // 针对webpack4 PS: 关于loader的详细说明可以参考webpack3.x的学习介绍，上面配置中需要注意的是多页面的公共库的引入采用的是vendor+暴露全局变量的方式，其实这种方式有诸多弊端，而webpack4针对这种情况设置了新的 进阶的webpack4配置搭建 包含以下几个方面： 针对CSS和JS的TreeShaking来减少无用代码，针对JS需要对已有的uglifyjs进行一些自定义的配置(生产环境配置) 新的公共代码抽取工具
3.8K120发布于 2018-05-16 - 来自专栏Young Dreamer
webpack4：连奏中的进化
webpack4在2月底的时候发布，这次webpack4有了一个名字"Legato"，也就是"连奏"的意思，寓意webpack在不断进化，而且是无缝(no-gaps)的进化。 webpack4提供了零配置方案，默认入口属性为./src，默认输出路径为. /data/test.json' 如何迁移升级到webpack4 0配置的局限性 webpack4声称能够0配置，但是0配置有很多局限性，比如只能是单入口的项目，入口和产出的文件名是固定的，entry webpack4配置文件的变化点 如何配置webpack4下的配置文件，需要大致了解webapck4的配置项的改动点。 中文升级日志 webpack4升级指南以及从webpack3.x迁移 Webpack4 新特性 及 Vue-cli项目升级 Webpack4官方指导教程 webpack4.0打包优化策略整理
1.7K50发布于 2018-05-29 - 来自专栏Elson's web
从webpack4打包文件说起
这里有webpack4的打包及加载机制，要不了解一下？而这一切就得从打包文件说起。 下面通过打包文件来深入了解下webpack4的模块化处理以及代码拆分加载机制。 使用的webpack配置如下，通过调整entry的内容来观察对比打包文件的异同。 filename: '[name]-[chunkhash:8].js' // 为了后面的多入口 }, devtool: '' // 去掉sourcemap，模块不会被eval包裹，更直观 }; 一、webpack4 webpack4中只有optimization.namedModules为true，此时moduleId才会为模块路径，否则是数字id。 配置拆分点 webpack4使用optimization.splitChunks来配置拆分点，与webpack3的commonChunkPlugin相比，更加易操作、易理解。
3.2K91发布于 2018-08-01 - 来自专栏漫画前端
webpack4配置详解之慢嚼细咽
[webpack4配置详解之慢嚼细咽] 前言 经常会有群友问起webpack、react、redux、甚至create-react-app配置等等方面的问题，有些是我也不懂的，慢慢从大家的相互交流中 今天就尝试着一起来聊聊Webpack吧，旨在帮大家加深理解、新手更容易上路，都能从0到1搭建配置自定属于自己的脚手架，或对已封装好的脚手架有进一步的巩固，接下来苏南会详细讲解webpack中的每一个配置字段的作用(部分为webpack4 看了下文档它是在提取css文件时根据内容计算而来的 hash ，结合ExtractTextWebpackPlugin插件使用 hash长度 默认20，可自定:hash:8、chunkhash:16 mode 这个属于webpack4 eval-source-map较多，每个都有它不一样的特性，有兴趣的同学可以一一尝试， [以上为自定配置中使用频率较高的选项，公众号：honeyBadger8] optimization optimization是webpack4 mockApi': 'https://easy-mock.com/project/5a0aad39eace86040263d' ,//请求可直接写成 /mockApi/api/login... } } webpack4
85540发布于 2018-12-18 - 来自专栏漫画前端
webpack4配置详解之常用插件分享
[webpack4，从 0 配置到项目搭建] 前言 继上一次 webpack 的基础配置分享之后，本次将分享一些工作中项目常用的配置插件、也会包含一些自己了解过觉得不错的插件，如有分析不到位的，欢迎纠错 Wepack4 之后废弃了很多的插件，这里只会讲解 webpack4 还支持的（包含 4 之前插件），已经废弃的将不再阐述。 它们跟上一篇的optimization配置下的的splitChunks、runtimeChunk基本是一致的，； SplitChunksPlugin、RuntimeChunkPlugin，其实就是 webpack4 注意点 1：请把配置一定写在 HtmlWebPackPlugin 插件之后，否则会报`HtmlWebpackPlugin.getHooks is not a function`错误， //注意点 2：webpack4 小程序项目如何设置资源的防盗链～ webpack4 配置详解之常用插件分享 作者：苏南 - 首席填坑官 链接： https://blog.csdn.net/weixin_43254766/article
1.6K00发布于 2018-12-20 - 来自专栏掘金安东尼
webpack4 之 cacheGroups 分包【究极奥义】
(●'◡'●) webpack4 最核心的特性是 【splitChunks】，splitChunks 最核心的配置是 cacheGroups！ 基于这个两个前提，我们再进行下一步。
1.6K20编辑于 2022-09-22
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号