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

使用webpack来进行打包 webpack的概念 在开始前我们需要先理解一些核心概念： 入口( ...

webpack的入口配置项表示要配置的文件就是开发环境或者生产环境 浏览器本身不能认识的一些东西必须经过webpack的编译才能认识，但是要去写的时候我们经常用到预编译什么的比如scss比如jsx甚至vue的文件后缀名是vue而不是js，这种开发环境我们可以更加清晰明确的书写我们的代码。更加高 ...

1.自动清理构建目录产物 2. 自动补齐css3前缀 3. 移动端px 自动转化成rem 目前官方推荐我们使用vw、vh进行 ...

前置 自定义博客园样式需要一下几部分 页面定制 CSS 代码 博客侧边栏公告（支持 HTML 代码） （支持 JS 代码） 页首 HTML 代码 页脚 HTML 代码 你可 ...

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

前言 webpack 是一个当下最流行的前端资源的模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。 它是高度可配 ...

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