Webpack-Blocks v1.0 迁移指南与技术解析-CSDN博客

Webpack-Blocks v1.0 迁移指南与技术解析

本文主要介绍如何从 webpack-blocks v0.4 迁移到 v1.0 版本，并详细解析新版本的核心变化与技术特性。

迁移配置变更

全新的 match() 方法

v1.0 版本引入了 match() 方法，用于精确指定哪些文件应该应用特定的加载器。这个方法可以与所有添加加载器的块一起使用，如 babel、css、elm、postcss 和 sass。

重要变化：旧版本中的 fileType、exclude 和 include 选项已被移除，现在统一使用 match() 方法来实现相同功能。

const { createConfig, css, file, match, postcss } = require('webpack-blocks')

module.exports = createConfig([
  // 默认匹配 node_modules/ 外的 *.js 和 *.jsx 文件
  babel(),

  // 匹配所有 CSS 文件，但不包括 node_modules 中的
  match(['*.css', '!*node_modules*'], [css(), postcss()]),

  // 匹配常见图片格式
  match(['*.gif', '*.jpg', '*.jpeg', '*.png', '*.svg', '*.webp'], [file()])
])

资源管理包调整

@webpack-blocks/assets 包现在包含了原先在 @webpack-blocks/webpack 中的 css、css.modules、file 和 url 块。这些块用于配置 css-loader、file-loader 或 url-loader。

主包功能整合

新的 webpack-blocks 包是一个便利包，它封装并导出了最常用的块，包括：

资源管理相关块（assets）
Babel 相关块
开发服务器块
文本提取块
PostCSS 块
Sass 块
TypeScript 块
Uglify 压缩块
Webpack 核心功能块

其他重要变更

不再支持 Webpack v1：项目已全面转向 Webpack v3
Webpack 作为 peer 依赖：需要显式安装 webpack
Babel 包重命名：@webpack-blocks/babel6 更名为 @webpack-blocks/babel
Babel-core 作为 peer 依赖：需要单独安装 babel-core
resolveAliases 替换：使用更通用的 resolve() 替代
移除了 devServer.reactHot()：不再内置 React 热加载功能
Node.js 版本要求：最低需要 Node.js 6+

新增功能特性

Uglify 压缩包

新增的 @webpack-blocks/uglify 包提供了便捷的 JS 压缩配置，支持未转译的 ES2015 代码压缩。

setEnv() 工具块

新的 setEnv() 工具块可以方便地从 process.env 替换源代码中的常量：

module.exports = createConfig([
  setEnv(['NODE_ENV']),
  setEnv({
    BABEL_ENV: 'development',
    PORT: 3000
  })
])

resolve() 扩展名处理优化

resolve() 工具现在会前置自定义扩展名，而不是追加它们。这使得后设置的扩展名具有更高的优先级。

自定义块迁移指南

API 重大变更

v1.0 版本的块签名变更为：

(context, utils) => prevConfig => updatedConfig

新的 utils 参数提供了三个实用方法：

addLoader(loaderDefinition)
addPlugin(plugin)
merge(configSnippet)

迁移示例对比

v0.4 版本的自定义 Babel 块：

function babel() {
  return context => ({
    module: {
      loaders: [{
        test: context.fileType('application/javascript'),
        loaders: ['babel-loader']
      }]
    }
  })
}

v1.0 版本的等效实现：

function babel() {
  return (context, { addLoader }) =>
    addLoader(
      Object.assign(
        {
          test: /\.(js|jsx)$/,
          use: ['babel-loader']
        },
        context.match
      )
    )
}