blog-web/webpack4升级踩坑.md at 87dc3221cf48f42ef62f33936b16d98ddd3008b4

sookie/blog-web

Fork 0

灌糖包子 87dc3221cf

更新github地址

2022-11-03 10:33:10 +08:00

7.1 KiB

Raw Blame History

title

date

移除已加入到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函数会在下一个主要版本当中被替换为getOptions函数

应该是源于现在的webpack的加载器配置比如babel-loader的配置

{
  test: /\.js$/,
  loader: 'babel-loader?cacheDirectory',
  exclude: /node_modules/
}

早期的webpack在指定loader时可以按照类似URL当中的模式, 在?后面对该加载器指定配置项 webpack3版本仍然支持这种写法, 但是已经不推荐所以更换为如下写法

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader', 
    options:{cacheDirectory: true}
  },
  exclude: /node_modules/
}

如果需要多个加载器进行链式处理, use部分可以使用数组形式比如scss文件的打包处理, 首先需要sass-loader, 然后为了兼容性需要用postcss-loader处理, 最后使用css-loader处理写作如下格式

{
  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加入到依赖

升级各个加载器和插件

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文件当中体积大于这个值的, 直接保留原文件加载器配置如下

{
  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已被废弃之前的做法如下

// 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配置文件如下

// 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插件

这插件的用法就很简单了

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文件

7.1 KiB Raw Blame History