webpack 的文章 - SegmentFault 思否

0

webpack踩坑记录

焉识 19 小时前发布于
收藏

webpack入门级配置（最新）目前最的正式版本是：4.31.0，推荐使用本地安装，webpack官网-指南 1.初始化确认node 的版本号 node -v 新建一个项目文件夹 mkdir demo 初始化 npm init -y npm 安装 webpack webpack...

0

webpack4.29.x成神之路（二十一）编写一个plugin

李毅超 21 小时前发布于
收藏

目录上节：编写一个loader 目录：插件会运行在webpack的各个生命周期，我们设计一个插件时，必须确定这个插件的执行时机。webpack的生命周期很多，参考：[链接] 现在写个简单的插件，需求是在打包完成后，额外...

0

webpack4.29.x成神之路（二十）编写一个loader

李毅超 22 小时前发布于
收藏

目录上节： css代码分割目录：先改一下src/index.js： {代码...} 现在写一个简单的loader，将所有的webpack替换成其它内容，内容可通过options配置。在根目录新建loaders/replace-loader.js。 loaders/replace...

0

webpack4.29.x成神之路（十九） css代码分割

李毅超 1 天前发布于
收藏

目录上节：懒加载上节目录如下： css代码分割一般用于生产环境，先修改src/index.js: {代码...} styles/index.less: {代码...} 然后npm run build,浏览器运行bundles/index.html: 现在样式是通过style标签内联...

0

webpack4.29.x成神之路（十七）代码分割(code spliting)下

李毅超 1 天前发布于
收藏

目录上节：代码分割(code spliting)中上节目录如下：前两节代码分割只用到了splitChunks中的chunks属性，现在来看下其它属性魔法注释先来打个包，npm run build：可以看到lodash打包后的名字是vendors~lod...

0

webpack4.29.x成神之路（十八）懒加载

李毅超 1 天前发布于
收藏

目录上节：代码分割(code spliting)下上节目录如下：其实在代码分割时已经用过懒加载了，src/index.js内容如下： {代码...} npm run build看生成的文件：这三个文件将被用于浏览器，现在运行index.html打开f...

0

webpack4.0从零开始单页（多页）应用配置 (一)

comeOutBing 1 天前发布于
收藏

借用官网的话：“webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然...

0

webpack4.29.x成神之路（十六）代码分割(code spliting)中

李毅超 1 天前发布于
收藏

目录上节：代码分割(code spliting)上上节目录如下：分割异步代码之前src/index.js里都是同步代码：现在来写段异步逻辑，修改src/index.js: {代码...} import()可以不加载文件并返回promise,参考：[链接] ...

0

webpack4.29.x成神之路（十五）代码分割(code spliting)上

李毅超 1 天前发布于
收藏

目录上节：区分开发和生产环境上节目录如下：什么是代码分割先来修改下src/index.js: {代码...} 这里引入lodash并调用join方法，然后安装下lodash: npm i lodashnpm run build, 可以看到lodash和业务代码都...

0

webpack4.29.x成神之路（十四）区分开发和生产环境

李毅超 1 天前发布于
收藏

目录上节：摇树优化(tree shaking) 上节目录如下：环境介绍 webpack的mode选项有三个值：development | production | none, 分别看下不同模式下webpack的默认配置：详细参考：[链接] 从默认配置也可以看出，...

0

webpack4.29.x成神之路（十三）摇树优化(tree shaking)

李毅超 1 天前发布于
收藏

目录上节： source-map 上节目录如下：概念官方：描述移除 JavaScript 上下文中的未引用代码。也就是希望webpack在打包时把没用到的函数删掉，最常见的就算第三方函数库：lodash,date-fns等。新建src/js/math...

3

webpack 代码分离快速指北

JS菌 1 天前发布于
3 收藏

在此之前，首先要知道经常配置的 output 中有关 filename 和 chunkFilename 的区别；简单来说在 entry 定义的入口文件走的就是 filename 配置项，在入口文件内部引入的通常情况下是 chunk，走 chunkFilename 的配置

0

webpack4.29.x成神之路（十二） source-map

李毅超 1 天前发布于
收藏

目录上节： babel编译es6 上节目录如下：使用webpack编译后的代码运行在浏览器上，一旦出错，错误指向的是编译后的代码，这对调试带来极大困难，所以webpack自带devtool选项来解决这一问题。修改webpack.confi...

0

webpack4.29.x成神之路（十一） babel编译es6

李毅超 1 天前发布于
收藏

目录上节： webpack-dev-server下上节目录如下：基本用法 es6语法因为浏览器兼容性问题较多，本不能直接使用，但因为babel这种能降级es6+语法的工具，使得es6+已提前普及。先来写点es6语法。src/index.js: {代...

3

webpack中如何加载静态文件

小李子的一天 2 天前发布于
2 收藏

前言: 对于非静态的文件，如js，当webpack打包时，会被直接打到模块文件中，如main.js，如果修改了，需要再次编译而对于静态文件，如jpg，svg等，我们不希望webpack去打包，只需要在build完后，直接放到dist下的...