webpack是当下最流行的js打包工具，这得益于网页应用日益复杂和js模块化的流行。webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。优化输出打包结果更小可以让网页打开速度更快以及简约宽带。可以通过这以下几点做到1、压缩csscss-loader 在webpack2里默认是没有开启压缩的，最后生成的css文
原创
2021-01-09 22:36:18
282阅读
1.安装 2.编辑配置文件 3.运行 在项目根目录执行webpack可以启动默认配置文件webpack.config.js运行指定配置文件执行webpack --config webpack.develop.config.js 把运行命令放到package.json文件中 启动命令还可以加很多参数w
转载
2017-12-23 23:20:00
75阅读
2评论
在CMD生成默认package.json文件： 基础安装包： 最终 package.json 文件： 在根目录建webpack.config.js 文件并编写: webpack 常用命令 老写那么长的命令四不四撒 所以在package.json 编写 npm scripts 集成命令： 参考： ht
原创
2021-07-30 15:13:26
116阅读
最近在做的项目因为相对较大（打包有100多个chunk），在build构建的时候速度一直上不去，甚是烦恼。由于用的是vue cli的webpack2模板，一开始并没有想着要对其进行优化，一直觉得是webpack本身慢+硬件慢（在开发机上开发，内存和CPU都不是很强力）的原因。后来慢到实在受不了了，转
转载
2017-07-29 16:12:00
135阅读
2评论
第一步：安装 webpack工具1 配置淘宝库文件地址：防止国外镜像效果不好执行命令：npm install -g cnpm --registry=ht
原创
2023-03-02 05:36:33
128阅读
tree shaking [ʃeɪk] v.摇；发抖；震动；动摇 n.抖动；摇动；颤动 即 webpack 在打包的过程中会将没用的代码进行清除(dead code)。 一般 dead code 具有一下的特征： 代码不会被执行，不可到达 代码执行的结果不会被用到 代码只会影响死变量（只写不读） 使 ...
转载
2021-07-12 16:03:00
176阅读
2评论
module.loaders 变更为 module.rules。 loader名字需要写全。 webpack-dev-server，实际上是一个小型Express服务器，它是用webpack-dev-middleware来处理webpack编译后的输出。 vue有两种构建方式，独立构建和运行构建。它
转载
2017-02-26 02:11:00
212阅读
2评论
1.webpack概念 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 构建就是把源代码转换成发布到线上的可执行 JavaScrip
转载
2018-11-05 16:40:00
135阅读
一、速度分析安装插件speed-measure-webpack-pluginnpm install --save-dev speed-measure-webpack-plugin复制代码引入插件、创建插件对象const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); //引入插件const smp = new SpeedM
转载
2021-01-31 11:21:03
5823阅读
2评论
Webpack2 中有很多涉及路径参数配置，若不知其所以然，很容易混淆出错。本文尽可能的汇集了 Webpack2 中设计路径的配置，力争深入浅出。 context context 是 webpack 编译时的基础目录，入口起点（entry）会相对于此目录查找。 若不配置，默认值为当前目录，webpa
转载
2017-03-20 22:50:00
86阅读
2评论
本文承接上一篇《入门级教程》，下面将提供实例演示，包含三个示例场景的文件打包。地址：https://github.com/alex2chen/webpack-example.git。
原创
2023-04-02 14:51:33
87阅读
本文将从打包分析，速度优化，体积优化三个方面进行阐述打包分析初级分析: webpack内置的stats(构建
原创
2021-08-04 11:26:30
415阅读
1、 webpack： optimization: { minimize: false, // 可以先测试为false，不压缩，打包之后看源码，是否有优化空间，正式生产环境需要压缩的设置为true1 usedExports: true, // 先设置为true，未使用的代码不应该打包，只有使用到的才 ...
转载
2021-07-29 20:57:00
135阅读
2评论
前言老项目用的webpack2,有浏览器刷新开发起来方便多了解决单页面的entry: [ // 给webpack-dev-server启动一个本地
原创
2022-07-11 10:42:18
122阅读
webpack 打包性能优化
开启多线程打包 thread-loader
转载
2020-12-30 15:05:00
668阅读
2评论
默认情况下，webpack 会打包所有的 Moment.js 语言环境（在 Moment.js 2.18.1 中
原创
2022-09-10 00:32:28
1208阅读
