webpack4功能配置划分细化(三)

原创 Lin_Grady 教程 webpack 186阅读 2018-12-18 22:47:18 举报

前言

之前一段时间工作原因把精力都放在小程序上,趁现在有点空闲时间,刚好官方文档也补充完整了,我准备重温一下 webpack 之路了,因为官方文档已经写得非常详细,我会大量引用原文描述,主要重点放在怎么从零构建 webpack4 代码上,这不是一个系统的教程,而是从零摸索一步步搭建起来的笔记,所以前期可能bug会后续发现继续修复而不是修改文章.

webpack4从零开始构建(一)
webpack4+React16项目构建(二)
webpack4功能配置划分细化(三)
webpack4引入Ant Design和Typescript(四)
webpack4 代码去重,简化信息和构建优化(五)

基本已经可以使用的完整配置webpack4_demo,

继续上回分解,我们之前已经实现了资源处理,配置环境分开,引入React库和babel库,图片优化和打包可视化,这一章我们就将零散的文件进一步规格化配置

2018/12/26上传,代码同步到第四篇文章
2019/03/14上传,补充代码到第三篇文章

配置文件

我们在根目录单独新建文件夹config,将所有webpack配置文件放进去,然后改一下相对路径的引入,接下来抽取出些配置文件单独一个模块管理.

alias.js

路径简化单独一个配置文件方便查找

rules.js

规则处理单独一个模块,实在太多了

webpack.common.js

现在改改路径和引入,瞬间清爽很多,有个地方需要注意的是现在配置文件和dist文件不在同一个层级,默认是不允许删除层级之上,我们需要开放权限
因为最近更新版本不支持以前写法,所以替换一下

package.json

也稍微改一下执行路径,换个更加合适的命令名

为了实现配置效果我们需要安装一个插件cross-env

这是一个可以跨平台系统设置环境变量的库,简单来说就是在命令行设置变量

然后我们就能在js里获取process.env.NODE_ENV字段拿到我们自定义的字段了.接下来我们修改一下配置文件

图片配置

我们目前的图片配置分别使用了url-loader转码和image-webpack-loader做压缩,实际开发中我们不需要压缩,所以将后者抽离.

REACT热更新

引入react之后会发现现在修改js代码会刷新,但是浏览器需要手动刷新才看到效果,控制台提示

Ignored an update to unaccepted module,The following modules couldn’t be hot updated: (They would need a full reload!)

这个问题我们可以通过引入react-hot-loader解决

先在.babelrc添加配置

然后把根组件包裹在里面输出,修改\src\page\main.jsx文件

然后重新执行命令测试即可

HTMl&CSS热更新

如果足够认真的话你们会发现现在如果修改样式之后代码会更新,但是浏览器不会自动刷新了.

那是因为热更新的代码是输出在内存中,而我们之前引入了mini-css-extract-plugin插件提取css单独合并一个模块之后,尽管代码也会更新,但是html引用的link没有改变所以沿用的还是更新前的样式,html更新暂时没找到方法,但是不影响React开发,而css更新我们可以用过环境配置,不提取样式解决.

当然,如果真的需要实现html更新的话,可以简单粗暴的换回全局刷新即可

rules.js

webpack.common.js

输出名字那里也换了一下,官方推荐

For long term caching use filename: "[contenthash].css". Optionally add [name].

默认配置如下:

但是这样子即使没改动也会导致hash改变而重新打包,这里简单说一下几种常用变量的区别

  1. hash: 和整个项目构建相关并且全部文件公用相同hash值,即没有缓存效果只适用于开发阶段
  2. chunkhash: 根据入口依赖文件解析构建对应的chunk生成对应的hash值,可以保证正常业务修改不影响公共代码,因为公共代码属于一个单独模块,但是样式被打包进业务模块所以两者公用同一个chunkhash.
  3. contenthash: 样式模块根据自身内容而生成,做到不被业务代码改变而影响

因为对应打包路径换了一下,所以loader也需要判断一些路径

生产警告!!!!

你们以为这样就算完了?不,你打包生产环境看看

然后你会发现居然没有打包css!!??

到处查找资料发现有两种办法解决

修改引入方法

修改package.json

具体原因可以看

CSS压缩

mini-css-extract-plugin没有实现压缩功能,我们自己重新引用一个完成库optimize-css-assets-webpack-plugin

它会在构建期间搜索css资源并且优化压缩处理.

然后生产配置文件修改webpack.prod.js

CSS增强

postcss-loader可以同通过配置增强CSS的功能,在这里我们先简单使用自动补全前缀的功能,首先

在根目录新建postcss.config.js作为配置文件

只是加载插件设定兼容的系统版本,同时也要在rules.js修改,需要设定寻找配置的路径

注意引入位置

Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

代理

启动服务器开发有时候需要访问外部域名请求,但是后台又没帮你解决跨域问题的话,我们可以再配置增加一个跨域配置,如下

当下所有/api的请求都会被转发到http://www.test.cn地址去,更多用法参考文档http-proxy-middleware

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复