什么是webpack？ 一句话概括：webpack是一个模块打包工具（module bundler）。重点在于两个关键词“模块”和“打包”。什么是模块呢？我们回顾一下曾经的前端开发方式，js文件通过script标签静态引入，js文件之间由于没有强依赖关系，如果文件1要用到文件2的某些方法或变量 ...

起步 在此之前我们先npm init初始化一个项目，本地安装webpack和webpack-cli，然后在根目录创建index.html、webpack.config.js和src文件夹，在文件夹内再创建一个main.js作为入口文件 准备工作完成后如图所示： main.js ...

前言 该笔记是基于居玉皓老师的《Webpack实战：入门、进阶与调优》与webpack官方文档的内容记录的 入口起点 资源处理流程 在一切流程的最开始，我们需要指定一个或多个入口（entry），也就是告诉Webpack具体从源码目录下的哪个文件开始打包。 如果把工程中各个模块的依赖关系 ...

置的，我们先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugin ...

欢迎大家前往云+社区，获取更多腾讯海量技术实践干货哦~ 作者介绍：陈柏信，腾讯前端开发，目前主要负责手Q游戏中心业务开发，以及项目相关的技术升级、架构优化等工作。 前言 webpack 是一个强大的模块打包工具，之所以强大的一个原因在于它拥有灵活、丰富的插件机制。但是 webpack ...

1、入口（Entry） entry 对象是用于 webpack 查找启动并构建 bundle。entry 是应用程序的起点入口，从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内 ...

Tree Shaking 树木摇晃：不用的js功能不打包 当有多个函数功能时，只调用了其中某一些函数，但是打包时，会统统全部打包，造成浪费，这个时候就要使用“摇树”，将没有用 ...

成少量的bundle(通常只有一个)，由浏览器加载。它是高度可配置的，在开始前需要先理解四个核心概念： ...