- 综合排序
- 最热优先
- 最新优先
- 来自专栏小白维基
webpack 4 入门
文章内容不仅仅是简单的「概念堆叠」，还有一些「重点」概念的「深入理解」，不过篇幅有限我不希望这篇文章变成一份冗长的伪文档，所以全部的内容都是围绕 webpack 的 4个 核心概念延展开来的，每个配置后面我都会尽量跟上一个实例以更加形象的展示配置的具体作用 4. 插件(plugins) 对应属性：plugings 作用说明： 打包优化、资源管理和注入环境变量。 4. 插件(plugins) 插件是 webpack 的支柱功能。webpack 自身也构建于插件系统之上。 插件目的在于解决 loader 无法实现的其他事。 apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。 4. 依赖图(dependency graph) 任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有「依赖关系」。
1.1K20编辑于 2022-04-02 - 来自专栏禅境花园
webpack3 升级 webpack4
据说 webpack3 比 webpack4 编译速度将近快了 60%-80%， 成功升级之后，于是来记录下，项目主要是 vue ^2.5.9 ， webpack ^4.10.2 ， webpack-dev-sever 4 +++ const ExtractTextPlugin = require('extract-text-webpack-plugin') //for webpack3 ----- module.exports 4 +++ - new ExtractTextPlugin({filename:'main.css'}) //for webpack 3 --- ] ... } webpack-dev-server 3 升级 4 之后需要改动的配置 plugins: [ //已经移除 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor /node_modules')) === 0 ) } }), new webpack.optimize.UglifyJsPlugin(...）
83620编辑于 2022-10-25 - 来自专栏程序员IT圈
webpack 4 升级指北
2018年2月25日，刚过完年webpack就给了一个加班红包。webpack4经过1个月的缓冲期，终于发布了正式版，那么抛给广大开发者的问题又来了，我是不是要升级了呢？ 本文就站在一个之前用webpack3开发项目，现在打算升级到4的角度上，来讲一讲需要升级的内容。 安装 首先你要重新安装以下的依赖包： webpack4 webpack-cli（用来启动webpack） html-webpack-plugin还没有更新，会出现 compilation.templatesPluginisnotafunction ，dev-server升级到3，各种loader你们自己看着办，如果是新装的应该是已经支持了的，如果在编译过程中报 cannotfind xxx的错误，说明xxx对应的loader可能需要升级了，因为webpack4 会出现提醒，所以还是加上吧 CommonsChunkPlugin 相信大家如果听说过webpack4的更新，最大的感触应该就是去除了CommonsChunkPlugin，毕竟官方 change log写的篇幅最多的就是这个
1.5K70发布于 2018-03-05 - 来自专栏前端导学
webpack4 入门
/lilugirl/learn-webpack4/tree/master/3 用webpack编译index.js文件生成目录dist和main.js文件 使用CommonJS的模块引入方式打包源码 https ://github.com/lilugirl/learn-webpack4/tree/master/4 常用命令 全局安装webpack npm install webpack webpack-cli webpack会根据配置文件自动找到入口文件 按照配置进行打包 源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/5 如果一个项目下有两个 /avatar.jpg'); console.log(avatar); 执行打包命令 npm run bundle 源码地址 https://github.com/lilugirl/learn-webpack4 'bundle.js', path: path.resolve(__dirname, 'dist') } } 参考代码 https://github.com/lilugirl/learn-webpack4
70130发布于 2019-10-08 - 来自专栏前端小叙
webpack 4 配置备忘
webpack.dev.js const merge = require('webpack-merge'); const webpack = require("webpack"); const path (), new webpack.NamedModulesPlugin(), ], }); webpack.prod.js const merge = require('webpack-merge /** * Created by MBJ20180827S1 on 2018/10/19. */ const webpack = require("webpack"); const path = (mp4|webm|ogg|mp3|wav|flac|aac|swf|mov)(\?.*)? ": "0.0.10", "html-webpack-plugin": "^3.2.0", "image-webpack-loader": "^4.4.0", "less": "
41730编辑于 2021-12-16 - 来自专栏乱码李
webpack4 新特性
目前来说 webpack4 已经趋于稳定，很多关键的插件也都更新了对 webpack4 的支持；更为重要的是，webpack4 的官方文档（中英文）已经很完善了，因此现在不学习 webpack4，更待何时 webpack4 升级建议 webpack4 依赖 node 版本 >= 6.11.5，node4 及其以下版本将不再支持。所以首先需要检查 node 是否需要升级。 webpack4 带来的变化 可能是受到 parcel（一款号称快速，零配置的 Web 应用程序打包器）的影响，webpack4 也引入了零配置的概念，遵从软件行业更先进的『规约大于配置』的理念。 apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。 定义 apply 方法。 指定一个绑定到 webpack 自身的事件钩子。 Compiler 和 Compilation 的区别在于：Compiler 代表了整个 webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译。
1.6K20发布于 2021-11-26 - 来自专栏前端杂货铺-Gopal
webpack3 升级到 webpack4 小记
来提升一下编译打包的速度 注：代码大部分参照网络，可以在后面看到链接 调研 webpack3 升级到 webpack4 的话，还是做了很大的改动，我查询资料总结如下（当然不止以下改动）： ? 解决方法： 在 webpack4 中不再支持 CommonsChunkPlugin，而是使用 splitChunks 替代，那么这两者有什么区别？ by instanceof Entrypointinstead 解决方法： 这个是因为 webpack 4 不再 支持 extract-css-chunks-webpack-plugin，我们可以使用 解决方法： webpack 4 已经废除了 之前 UglifyJsPlugin，用 optimization.minimize 替代 修改前： plugins: [ new webpack.optimize.UglifyJsPlugin /mode/ 解决方法： 这是一个 warnning， webpack 4 一些默认的配置需要通过 mode 配置启用，这个配置项有三个配置值， development、 production 和 none
1.4K20发布于 2020-09-24 - 来自专栏小皮咖
Webpack4 搭建 Vue 项目
前言 由于 Parcel 打包工具的影响，webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。 对于一些习惯webpack3 的开发者难免有些不习惯。本文就带你绕过 vue-cli，用 webpack4 一步步搭建 vue 项目。 注：（本文讲述的是webpack4基础配置，文章有点长，请耐心看完。或者直接查看项目源码，或者ctrl + w） 2. /dist') }, }); webpack4 增加了 mode 属性，设置为 development / production,以下是默认配置 development: process.env.NODE_ENV : path.resolve(__dirname, '../') }), ] 分离 CSS webpack4 中使用 mini-css-extract-plugin 插件来分离 css。
1.4K10发布于 2019-11-05 - 来自专栏全栈程序员必看
走近webpack（4）–css相关拓展
我们前面已经学了很多webpack基本的处理情况，一句话总结就是，一个优秀的webpack项目，主要的核心用法就是整合loader和plugin去处理你想要的任何需求。 下面，咱们一起来学学如何用webpack来处理less，sass等预编译器。先看看如何用webpack处理less。 不知道大家还记不记的咱们在处理css文件的时候做过一件事情，也就是把css从js中分离出来，因为webpack打包是把css打包进js的，所以我们修改一下loader的配置方式，跟前面的css是一样的， 所以我们可以使用一个插件，在打包的时候自动去除未使用的css样式： /*PurifyCSS-webpack要依赖于purify-css这个包，所以这两个都安装一下，-D是--save-dev的简写，i是 install的简写*/ npm i -D purifycss-webpack purify-css 然后我们引入glod和purifycss-webpack插件： const glob = require
74510编辑于 2022-07-20 - 来自专栏江歌闲谈
Webpack4 性能优化实践
本文主要是自己平时的工作积累和参考别人的文章，而进行总结，基于 Webpack4 版本。 构建分析 编译速度分析 对 Webpack 构建速度进行优化的首要任务就是去知道哪些地方值得我们注意。 在 Webpack4 中，hard-source-webpack-plugin 是 DLL 的更好替代者。 hard-source-webpack-plugin 是 Webpack 的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行 Webpack 两次：第一次构建将花费正常的时间。 ></script> </head> <body>
</body> </html> JS 压缩 从 Webpack4 国内外公共 CDN 地址 BootCDN cdnjs 参考资料 Webpack Guidebook Webpack 核心知识有哪些？ 博客 博客1.5K00发布于 2021-06-14 - 来自专栏前端自习课
【Cute-Webpack】Webpack4 入门手册（共 18 章）
本文也是属于【EFT - 前端新手村】的一部分，用来帮助新人快速入门 Webpack4，内容偏基础，当然也可以作为复习材料~~这里分享给各位小伙伴啦！ 2. /style/leo.scss'; 再 npx webpack 重新打包，并打开 dist/index.html 可以看到背景颜色已经添加上去： [webpack03] 4. webpack4 开始使用 mini-css-extract-plugin 插件，而在 1-3 版本使用 extract-text-webpack-plugin。 ，也能正常运行： [webpack16] 更多参数介绍，可访问中文官网的介绍:undefined《webpack-bundle-analyzer》 参考资料 《Webpack4 中文网》 《2019最新 Webpack4.0教程4.x 成仙之路》 总结 本文是根据 《2019最新Webpack4.0教程4.x 成仙之路》 学习总结下来的学习之路，适合入门，涉及范围较多，内容比较长，需要能静下心来学习。
2.7K31发布于 2019-08-15 - 来自专栏腾讯IVWEB团队的专栏
webpack4新特性介绍
从官方的 发布日志 来看, 本次大版本更新带来了很多新特性更新和改善，这将会让webpack的配置更加简单。本文，笔者将会全面介绍webpack4的新特性及实践。 备注：当使用webpack4时，确保使用 Node.js的版本 >= 8.9.4。因为webpack4使用了很多JS新的语法，它们在新版本的 v8 里经过了优化。 支持多种模块类型 webpack4支持5种模块类型： javascript/auto: 在webpack3里，默认开启对所有模块系统的支持，包括CommonJS、AMD、ESM。 0CJS 0CJS的含义是0配置，webpack4受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。 当在命令行里执行 webpack 命令时，webpack会将该文件作为项目的入口文件进行打包配置。 新的插件系统 webpack4对插件系统进行了不少修改，提供了针对插件和钩子的新API。
1K10发布于 2020-06-24 - 来自专栏FinGet前端之路
webpack4.x常用配置
配套代码demo：https://github.com/FinGet/webpack4_demo。 博客原文：[https://finget.github.io/2019/07/24/webpack4-0/](https://finget.github.io/2019/07/24/webpack4-0 初始化： yarn init -y yarn add webpack webpack-cli -D webpack-cli的作用就是让我们能在命令行中使用webpack、npx webpakck 这些指令 yarn add webpack-merge -D // build/webpack.base.conf.js const webpack = require('webpack'); const path ] }) // build/webpack.dev.cong.js const merge = require('webpack-merge'); const webpack = require('webpack
2.3K20发布于 2020-01-13 - 来自专栏zaking's
走近webpack（4）--css相关拓展
我们前面已经学了很多webpack基本的处理情况，一句话总结就是，一个优秀的webpack项目，主要的核心用法就是整合loader和plugin去处理你想要的任何需求。 下面，咱们一起来学学如何用webpack来处理less，sass等预编译器。先看看如何用webpack处理less。 不知道大家还记不记的咱们在处理css文件的时候做过一件事情，也就是把css从js中分离出来，因为webpack打包是把css打包进js的，所以我们修改一下loader的配置方式，跟前面的css是一样的， 所以我们可以使用一个插件，在打包的时候自动去除未使用的css样式： /*PurifyCSS-webpack要依赖于purify-css这个包，所以这两个都安装一下，-D是--save-dev的简写，i是 install的简写*/ npm i -D purifycss-webpack purify-css 然后我们引入glod和purifycss-webpack插件： const glob = require
1.3K100发布于 2018-05-02 - 来自专栏前端技术开发
webpack4配置学习(一)
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。 1.安装webpack 1.1需要先在项目中npm init初始化一下，生成package.json 1.2 npm install webpack webpack-cli -D 2.webpack配置 在根目录创建一个webpack.config.js文件，用于配置一些webpack，所有的配置项都会在webpack进行配置。 2.4webpack配置html打包文件处理 如果想每次打包之后，dist目录都会给我们生成一个html文件，这时候需要安装一个插件 yarn add html-webpack-plugin --save-dev --save-dev 也是需要在webpack.config.js引入 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
74920发布于 2019-09-23 - 来自专栏互联网杂技
react+redux+webpack教程4
接着上回新闻搜索的例子。现在我们要通过路由进入一个新的页面来查看新闻详细内容。 react和路由并没有什么直接关系，用什么路由都可以。不过使用react-router可以让我们的代码风格统一， 并且有些工具使用起来很方便。 先来安装react-router库（我目前安装的版本是2.0.1，跟1.x版本区别比较大）： npm install react-router --save 从使用上来说，react-router不过是一些react组件，所以用起来特别方便。不用多说，看个例子就知道怎么用了。 先把咱们已
2.3K100发布于 2018-04-03 - 来自专栏玩转大前端
Webpack4 常用配置详解
入口、出口配置 实现Webpack的打包最基本的就是配置好入口、出口，npm install webpack后在根目录创建webpack.config.js,代码如下： const path = require --watch' } 即可实现效果，缺点是还是得手动刷新页面，不够智能化，因此推荐的事第二种方法，使用webpack-dev-server，npm install webpack-dev-server 模块:const webpack = require('webpck')，再引入插件 plugins: [ new webpack.HotModuleReplacementPlugin() ] 之后在 package.json里配置启动脚本 "scripts": { "start": 'webpack-dev-server' } 运行npm run start即可热加载网页 识别打包 js 文件 CleanWebpackPlugin = require('clean-webpack-plugin'); const webpack = require('webpack'); module.exports
2.1K30编辑于 2022-08-15 - 来自专栏前端导学
webpack4使用笔记
安装webpack npm install webpack-cli -D npm install webpack -D 在项目目录下可以直接执行 npx webpack 来调用webpack 客户端 常用plugins的使用 plugins可以在webpack运行到某一时刻时，帮你做一些事情 html-webpack-plugin就是当webpack打包结束时，帮你做一个事情： 将会自动在打包目录下生成 实现整站实时更新的三种方式： 1 webpack --watch ? 2 使用webpack-dev-server ? ? 然后用webpack-merge 工具合并 首先安装 webpack-merge npm install webpack-merge -D ? ? webpack的配置 ? 配置打包命令 ? 在Vue Cli 3中配置webpack ?
1K20发布于 2020-04-24 - 来自专栏京程一灯
webpack4之原理分析
往webpack配置文件中增加属性 "remove", // 从webpack配置文件中删除属性 "serve", // 运行webpack-serve "generate-loader /convert-argv")(argv); // 将参数设置对象交给webpack执行 let compiler = webpack(options); webpack-cli 使用 args 分析 after-)compiler make (after-)emit done 监听相关 watch-run watch-close compilation compiler 调用 compilation 生命周期方法 都生成一个新的chunk 2.遍历module的依赖列表，将依赖的module也加入到chunk 3.如果一个依赖module是动态引入的模块，那么就会根据这个module创建一个新的chunk，继续遍历依赖 4. 重复上面过程，直到得到所有的chunks 全剧终 经过一周的时间，重新对这几年使用webpack4的感悟进行整理，是时候和 webpack4 说再见了，希望以后不要再见了...
96130发布于 2020-12-15 - 来自专栏IMWeb前端团队
webpack4 使用指南
本文作者：IMWeb zixinfeng 原文出处：IMWeb社区 未经同意，禁止转载 webpack4 基础 npm init --yes yarn add webpack webpack-dev-server webpack-cli mkdir src && touch index.mjs package.json scripts: {"webpack": "webpack --mode=production 注入脚本后文件的名称 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
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号