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阅读
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评论
webpack是当下最流行的js打包工具，这得益于网页应用日益复杂和js模块化的流行。webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。优化输出打包结果更小可以让网页打开速度更快以及简约宽带。可以通过这以下几点做到1、压缩csscss-loader 在webpack2里默认是没有开启压缩的，最后生成的css文
原创
2021-01-09 22:36:18
282阅读
npm+webpack+babel+react安装 1.首先要安装 Node.js， Node.js 自带了软件包管理器 npm2.在项目文件目录下生成package.json 3.用 npm 安装 Webpack 此时 Webpack 已经安装到了全局环境下，通常我们会将 Webpack 安装到项
转载
2017-12-08 10:56:00
131阅读
Webpack2 中有很多涉及路径参数配置，若不知其所以然，很容易混淆出错。本文尽可能的汇集了 Webpack2 中设计路径的配置，力争深入浅出。 context context 是 webpack 编译时的基础目录，入口起点（entry）会相对于此目录查找。 若不配置，默认值为当前目录，webpa
转载
2017-03-20 22:50:00
86阅读
2评论
前言我们知道前端的框架纷繁复杂，各有各的优点。而我们选择使用React作为开发框架的
原创
2022-09-11 01:18:31
185阅读
最近在做的项目因为相对较大（打包有100多个chunk），在build构建的时候速度一直上不去，甚是烦恼。由于用的是vue cli的webpack2模板，一开始并没有想着要对其进行优化，一直觉得是webpack本身慢+硬件慢（在开发机上开发，内存和CPU都不是很强力）的原因。后来慢到实在受不了了，转
转载
2017-07-29 16:12:00
135阅读
2评论
本文承接上一篇《入门级教程》，下面将提供实例演示，包含三个示例场景的文件打包。地址：https://github.com/alex2chen/webpack-example.git。
原创
2023-04-02 14:51:33
87阅读
Webpack+ES6+Babel+React手动搭建React脚手架未完，持续更新必备知识储备：nodejs: http://nodejs.cn/api/npm: https://www.npmjs.cn/webpack: https://www.webpackjs.com/concepts/Babel: http://www.ruanyifeng.com/blog/20...
原创
2021-07-16 09:49:48
609阅读
前言老项目用的webpack2,有浏览器刷新开发起来方便多了解决单页面的entry: [ // 给webpack-dev-server启动一个本地
原创
2022-07-11 10:42:18
122阅读
一. Babel 事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分： 开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的； 所以，学习Babel对于我们理解代码从编写到线上的转变过程至关 ...
转载
2021-09-16 11:39:00
250阅读
2评论
视频学习地址： 官方地址 神坑： 0、【You need to specify 'babel-loader' instead of 'babel'.】。解决方案：webpack中的loader:"babel-loader"，不要简写为：loader:"babel" 1、每次this.setState
转载
2016-07-13 22:03:00
150阅读
2评论
原创超清的 Webpack2 视频教程Webpack 作为目前前端开发必备的框架，Webpack 发布了 2.0 版本，此视频就是基于 2.0 的版本讲解的。这个基本就是目前国内最好的 Webpack 2.0 最好的学习视频了，希望可以对新手或者复习相关知识的朋友有用。 Webpack 是当下最热门的前端资源模块化管理和打包工具。 它可以将许多松散的模块按照依赖和规则打包成
转载
2022-09-23 14:56:45
104阅读
webpack 是一个现代的 JavaScript 应用程序的模块打包器(mor) 四个核心概念： ------------------------------------------------------------------------------------------------ 入口(Entry)： webpack 将创建所有应用程序的依赖关系图表(depen...
原创
2022-09-09 08:14:02
98阅读
之前通过一些 webpack 的简单配置，项目可以使用 React 来编写基本组件了，但是每次编写组件，都需要重新执行webpack命令打包，然后再手动在浏览器中打开页面才能看到开发结果，这是十分影响开发效率的，我们要的效果yarn start启动项目运行，在开发过程中使用ctrl+s保存文件，然后页面能自动更新，为此需要配置 HMR 和 webpack-dev-server。开发模式模式（Mod
转载
2021-01-19 22:31:20
619阅读
2评论
前面一篇，我们自己手动进行了代码分割。我们在使用 webpack 的时候，一般都会使用 code splitting。因为webpack 中有一些插件可以让我们非常容易地进行 code splitting。在 webpack4 中有一个插件：splitChunksPlugin，并且它直接与webpack 做了捆绑。不需要安装，直接可以配置使用。下面我们来实验一下。我们把index.js 改为imp
转载
2023-07-04 14:11:53
682阅读
