前端临床手札——webpack构建逐步解构（上）

lowett 发布于2019-08-22 10:36 / 3193人阅读

摘要：前言由于博主最近又闲下来了，之前觉得的官方文档比较难啃一直放到现在。文章会逐步分析每个处理的用意当然是博主自己的理解，不足之处欢迎指出沟通交流。后续将会补上构建生产的配置分析，案例参考。前端临床手札构建逐步解构下

前言

由于博主最近又闲下来了，之前觉得webpack的官方文档比较难啃一直放到现在。细心阅读多个webpack配置案例后觉得还是得自己写个手脚架，当然这个案例是基于vue的，但是并不影响你使用其他库（jquery这些）。文章会逐步分析每个处理的用意（当然是博主自己的理解），不足之处欢迎指出沟通交流。

案例

一个通用简单的手脚架，只需修改简单配置就可使用，同时满足多页面需求。

multiple-page-vue-webpack-example

最近添加了雪碧图功能，并把sass-loader替换成postcss的press，详细可以看分支develop

使用

# 安装依赖
$ npm i

# 运行本地服务，访问 http://localhost:6002 进行开发调试
$ npm run dev

# 构建发行版本到./dist目录
$ npm run build

目录结构

build/         #构建配置目录
src/           #源代码目录
    clients/   #入口文件
    imports/   #js代码目录，此为js引入的root目录
    styles/    #全局样式目录
    templates/ #页面模板文件（建议和入口文件名字对应）

分析案例

乍看案例build目录下代码挺多的，而且很多刚入手webpack的人都会瞬间懵逼。但是如果逐步分析理解后就会发觉其实还挺简单易懂，下面先介绍一下每个文件作用。

/build
    build.js               #构建生产代码
    config.js              #配置
    dev-client.js 
    dev-server.js          #执行本地服务器
    utils.js               #额外的通用方法
    webpack.base.conf.js   #默认的webpack配置
    webpack.dev.conf.js    #本地开发的webpack配置
    webpack.prod.conf.js   #构建生产的webpack配置

工作流程

本地测试

结合上面流程图和build目录下的文件介绍能看出主要webpack本地测试建立在webpack和express两个工具上面。

首先我们执行下面代码，能得到一个测试服务器，并能在浏览器预览到我们的代码效果

$ npm run dev

打开package.json 找到scripts能看到实际执行的是

$ node build/dev-server.js

接下来就先从dev-server.js开始分析

打开dev-server.js能看到引用这些核心依赖

./config

./webpack.dev.conf

webpack

express

webpack-dev-middleware

webpack-hot-middleware

connect-history-api-fallback

前两个是配置文件，webpack和express就不用多说了，主要看剩下那三个。

webpack-dev-middleware

webpack-dev-middleware 是一个结合了webpack配置的express中间件插件(不熟悉express的可以看这里)，哪他都干了些什么呢？官方文档是这样说的：

这是一个简单webpack中间件。它提供一个连接服务器并处理访问webpack中的文件。

webpack中的文件寄存在内存，不会生成文件。

如果在观测模式下修改的文件，中间件不再提供旧包，但会延迟请求，直到编译完成，在文件变化后页面刷新之前你无需等待。

简单来说就是提供一个可以让你访问经过webpack处理后的服务，然后看一下dev-server.js下这块的代码

const compiler = webpack(webpackConfig)

const devMiddleware = require("webpack-dev-middleware")(compiler, {
  publicPath: "/", 
  stats: {
    colors: true,
    chunks: false
  }
})

compiler就是webpack实例，然后这里的说明一下publicPath其实是访问的目录根，如果改为/app/那么你访问的地址就必须是http://localhost:6002/app/index.html。

webpack-hot-middleware

使用它的目的是让代码变化时能更新代码而无需刷新整个页面，但是这块配置就较为繁琐。除了需要在express挂载这个中间件之外还得修改webpack配置。

首先得在每个入口前加上webpack-hot-middleware/client，还需要添加一下plugin到webpack配置

// 这块由于是多入口处理有点不同，后续解析多入口问题和为何使用"./build/dev-client"而不是"webpack-hot-middleware/client"
Object.keys(webpackConfig.entry).forEach(function (name) {
  webpackConfig.entry[name] = ["./build/dev-client"].concat(webpackConfig.entry[name])
})

plugins: [
    ...
    // webpack 1.0
    new webpack.optimize.OccurrenceOrderPlugin(),
    // webpack 2.0
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
    ...
]

看到这类估计你会有所疑问，为何入口加上的是./build/dev-client而不是webpack-hot-middleware/client？因为这里由于使用了html-webpack-plugin而当修改了html我们需要它整个页面刷新，而写了个简单的处理，具体可以看dev-client.js，至于其他配置细节可以看官方文档。

connect-history-api-fallback

这个不多说一笔带过，就是让你的单页面路由处理更自然（比如vue-router的mode设置为html5时），具体看官方文档

关于多页面处理

这里页面处理使用了html-webpack-plugin插件处理，至于配置需要看三个地方，首先是入口配置webpack.base.conf.js

let webpackConfig = {
    entry: utils.getEntry(config.entry),
    ...
}

由于使用固定目录结构的关系，原理就是把src/clients/目录下的文件都视为入口文件加载到配置。

还有模板处理webpack.dev.conf.js

webpackConfig.plugins = [].concat(webpackConfig.plugins, utils.htmlLoaders(config.template, webpackConfig.entry))

模板处理也是一样，这里建立与一个潜规则：入口文件必须和模板文件的目录结构和名字一致。

在这样的条件下，多页面处理就简单很多了，具体细节可看utils@getEntry()和utils@htmlLoaders()。关于html-webpack-plugin配置细节可看官方文档。

后续将会补上构建生产的配置分析，案例参考：vue-cli。

前端临床手札——webpack构建逐步解构（下）

GPU云服务器云服务器前端构建手札逐步实现对象解构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90923.html

前端临床手札——webpack构建逐步解构（下）

摘要：续前端临床手札构建逐步解构上工作流程案例最近添加了雪碧图功能，并把替换成的，详细可以看分支构建生产上一篇说完了本地测试和是如何工作，接下来分析构建生产模式下配置如何配置和每个模块干了什么。续前端临床手札——webpack构建逐步解构（上）工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例：multip...

TerryCai 2019-08-22 10:37 评论0 收藏0
前端临床手札——文件上传

摘要：文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。但前提是需要约定传入值和返回类型。文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。大多文章之所以只说上传这步估计是简单易入门，但是实际工作时就会发现上传文件这个功能上是简单的，逻辑上却比较复杂。先说一下需求和功能点：需求：上传文件到服务器功能：上传单这么...

SexySix 2019-08-19 18:07 评论0 收藏0
前端临床手札——在微信播放视频的那些事

摘要：然而我真的太天真，微信浏览器怎样会让你这样好过问题集中于自动播放视频这块，需求很简单自动播放全屏不显示工具条自动播放一步步来，自动播放这个问题在十分肯定默认是不支持的，必须基于用户操作下才能加载视频。至于在微信下和一个样。某天收到旧同事的信息说希望我帮手做一下一个简单的H5，然后我看了看的确很简单：就是图片滚动到最后自动播放视频，播完显示个按钮交互。然而我真的太天真，微信浏览器怎...

_Zhao 2019-06-21 16:15 评论0 收藏0
前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

kid143 2019-08-19 18:17 评论0 收藏0