最近要对博客主题做些改造, 一方面是整合上看板娘
一方面是一些周边的功能, 计划加上夜间模式
期间可能需要频繁打包更新
借此机会, 升级一下主题包的webpack版本, 换用webpack4, 准备好再次被淹没在前端的汪洋大海之中
在还没升级之前, 处理几个遗留问题
移除已加入到git版本库的文件
如果一个文件已经加入到git的版本库跟踪, 那么直接把它写入到.gitignore
文件当中是无效的
应该先执行git rm --cached
把目标文件从版本库移除
–cached参数的作用是在本地仍然保留这几个文件, 如果不加的话会同时在本地执行删除
主题包里面**source/js/**当中的所有js文件由webpack打包生成, 从版本库移除
1 | git rm --cached themes/yilia/source/js/*.js |
之后在.gitignore当中加入themes/yilia/source/js/
这样之后打包生成的文件在提交时就会被忽略
所有目标文件在服务器端执行打包生成即可
如果有其他目录也同样处理
加载器参数问题
webpack的加载器大多都有可以指定的参数
之前的打包过程一直在报一个警告
parseQuery函数会在下一个主要版本当中被替换为getOptions函数
应该是源于现在的webpack的加载器配置
比如babel-loader的配置
1 | { |
早期的webpack在指定loader时可以按照类似URL当中的模式, 在?
后面对该加载器指定配置项
webpack3版本仍然支持这种写法, 但是已经不推荐
所以更换为如下写法
1 | { |
如果需要多个加载器进行链式处理, use
部分可以使用数组形式
比如scss文件的打包处理, 首先需要sass-loader, 然后为了兼容性需要用postcss-loader处理, 最后使用css-loader处理
写作如下格式
1 | { |
如果其中的加载器需要参数, 其中的每一项都可以写作对象的形式, 指定options
再次执行打包时, 该警告已消除
升级webpack
目前最新的webpack版本是4.30.0, 先执行npm install安装新版的webpack
之后依次解决带来的一系列问题
webpack-cli
webpack4版本应该是把API和命令行工具做了分离, 所以要在命令行执行webpack, 需要安装webpack-cli
提示还是非常友好的
按照提示把webpack-cli加入到依赖
升级各个加载器和插件
webpack4的一些api因为变动较大, 与之配合使用的加载器和插件已经不能完全适配
所以需要升级各个加载器和插件的版本
总之根据报错信息来就好
html-webpack-plugin
首先是html-webpack-plugin
的报错
这个插件是用来根据模板文件生成目标html文件的, 基本类似于java web当中从jsp到html文本的转化过程
当然在主题里面, 可以灵活运用为生成需要的ejs文件
升级这个插件到最新版, 目前的最新版是3.2.0
file-loader
然后是file-loader插件的报错
目前配置的是对于图片、字体文件的打包
文件体积小于1000byte的使用url-loader处理, 这个加载器会直接把文件转化为base64编码嵌入到css和js文件当中
体积大于这个值的, 直接保留原文件
加载器配置如下
1 | { |
css文件单独打包
如果不做特殊处理, css的代码会被打包到js文件当中, 导致js文件臃肿不堪
所以通常的做法是使用插件将css代码单独输出到文件
在webpack3之前, 使用的是extract-text-webpack-plugin
, 该插件在webpack4已被废弃
之前的做法如下
1 | // webpack.config.js文件 |
现在需要更换为mini-css-extract-plugin
, 该加载器适配webpack4.4以上, 自带css压缩输出
安装之后
修改webpack配置文件如下
1 | // webpack.config.js文件 |
但是引发了一个问题就是, 我本来可以创建多个ExtractTextPlugin对象实现输出到不同的css文件当中的
现在这个mini-css-extract-plugin似乎不支持这种功能
只能把不同的css引入放进不同的entry, 从而才能输出到不同的css文件
这样倒是也行, 于是又分出了一个entry
虽然能正常输出到另一个css文件, 但是另一个css并没有压缩, 文件里面的注释也都带着
这就不太好, 为了解决这个问题, 引入optimize-css-assets-webpack-plugin
插件
这插件的用法就很简单了
1 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') |
因为我把需要单独输出的css放在了名为viewer的模块当中
所以输出的名称按照MiniCssExtractPlugin当中的配置
就是viewer.8位hash.css
, 所以这里的正则才这样写, 只处理这一个即可
至此终于宣告完工, 打包可以正常运作
附: webpack.config.js文件