自从 2016 开始, 发现 SPA( Single Page Application ) 越来越多, 以前应用往往是一堆 html 文件通过 url 连接起来, 而到了 SPA, 整个应用只有一个 html 文件, 仅仅通过局部替换组件来完成页面变更.
( 说明一下, SPA 概念是很早以前就出现了, 作为服务端开发在留意前端动态会比较滞后, 关于前端的演变请自行谷歌, 此处不做描述 )
那为何要是用 webpack 这种工具开发呢? 写过代码都知道, 一份源码文件可能会引用多个文件的代码, 引入的文件路径也可能在编译后出现变更, 以 java 的 maven 为例, 项目配置是放在 main/java/resource 内的, 但在编译后, 其实所有的资源文件都放在 /classes/ 里面, 也就是项目根目录. 其次一份源码被多次引用, 代码在编译后如何复用, 以减少项目整体的大小. 在实际开发中可能出现的问题会更多, 并且在前端项目不断膨胀的情况下这类问题会越来越突出, 而 webpack 就是用来解决这一系列问题的.
然后简单讲一下 webpack , 这是个 javascript 里市场份额比较大的包依赖管理及其打包工具. 通过 webpack 我们可以轻松管理项目构建, 列一下最主要的几点:
- 设计出更加清晰的项目结构
- 通过一系列 webpack 插件解决 编译, 资源分离, 文件重定向 等功能
- 配置服务器 & 热部署进行辅助开发
在看文章前先自己看看官网文档说明形成自己的理解.
这里先列一下 webpack 的配置, 下文以此为例子.
在单页面应用内, 会有一个文件来驱动整个应用, 就像大部分 C 派系语言的 main
方法. 这种文件称为入口, 如 entry 配置项所示, index.js 文件被配置为入口, 当有人访问时, 该文件的代码会首先被执行.
在 webpack 内, entry 也可以配置为多入口, 当然这个就要自己查文档了.
devtool 选项是给开发者指定 source map 的配置方式, 源码在编译并且混淆压缩之后生成的代码是无法调试的, 就像 java 的 class. 解决方法是通过 source map 来定位变量在源码中的位置进行辅助.
-
output 用于指定编译后的代码输出路径
output 选项 -
webpack 支持应用发布, 当然这是用于开发的, 部署热部署后网页效果将与源码同步, 基本就是所见即所得, 省去了不少功夫. 但是这个选项需要安装
webpack-dev-server插件.关于这个插件, 如果想提供外部访问, 需要配置 host 以及 disableHostcheck, public 选项也要写上, 填你的机器在局域网内的 ip, 去掉该选项似乎会造成外部无法访问.
开发服务器配置 -
接下来到 webpack 最重要的一部分, 也就是 module 的配置.
module 选项
在编译时, webpack 会通过该配置对所有文件进行处理, 以上图为例, 比如 *.vue 的组件注册, vue 文件内的 image , css 等资源的抽离, es5/6/7 的降级编译, 这一系列动作都是通过配置 module 来指定的. webpack 在会从 entry 指定的文件开始检索, 通过 module 给出的 test 把匹配的文件放入对应的 loader 进行处理.
-
resolve 配置用于说明模块在引用时如何被解析, 先看个图.
resolve 配置比如说 extensions 配置告诉 webpack 拥有指定后缀的文件不用写后缀, 那么
import "../example.ts"可以直接写import "../example".而 alias 让文件引入变得更简单, 比如根目录有一个文件夹叫 util, 我想引用里面的 lang.js 文件, 那么
import "../../util/lang"可以直接写成import "@root/util/lang". -
最后是插件, 如下图.
plugins 配置webpack 的插件有很多种, 上图只列出我在项目中用到的插件, 具体列表可以点击这里.
以上就是 webpack 的简述, 当然本文只是起到带路的作用, 很多关于 webpack 的配置都没有说到, 真正入门还需要自己参考官方文档, 然后一步步搭建出一个简单可用的项目.
