webpack4升级踩坑

source/_posts/linux/博客图片迁移-后续.md

@@ -7,7 +7,7 @@ categories:
   - linux
 ---
 
-由于不折腾不舒服, 之前的图片迁移与构建时的自动同步虽然已经实现
+本着不折腾不舒服的原则, 之前的图片迁移与构建时的自动同步虽然已经实现
 但是仍有很多可以改进的地方
 <!-- more -->
 

source/_posts/前端杂烩/webpack4升级踩坑.md

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

themes/yilia/source-src/js/slider.js

@@ -185,7 +185,7 @@ const waifuTools = {
   "tools.chart"() {
     // 一言
     axios.get('https://api.imjad.cn/hitokoto/?cat=&charset=utf-8&length=55&encode=json').then(res => {
-      this.showMessage(res.data.hitokoto + res.data.source?`　　——${res.data.source}`:'')
+      this.showMessage(res.data.hitokoto + (res.data.source?`　　——${res.data.source}`:''))
     })
   }
 }

themes/yilia/webpack.config.js

@@ -1,5 +1,5 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CleanPlugin = require('clean-webpack-plugin')