Webpack 项目从 1.x 升级至 2.x,需要注意哪些问题?

阅读时长 5 分钟读完

1. 两个版本的主要区别

Webpack 2.x 与 1.x 相比,有如下的重要改变:

  • tree shaking:Webpack 2.x 已经原生支持 ES6 模块导入/导出的静态分析,可以通过标记导出为 side effect-free,优化打包时的代码体积。

  • scope hoisting:尝试将打包后的模块作用域尽可能合并,减少不必要的代码,在某些场景下优化性能。

  • 其他:Webapck 2.x 对于 loaders 迁移到 ES6,更优秀的性能,大量的 bug 修复等等。

根据这些改变,我们需要注意以下事项来顺利升级:

2. 缺少依赖

由于 Webpack 2.x 对于加载器加载的方式变更,因此在升级的过程中可能会出现模块依赖丢失的问题。可以通过检查node_modules下的模块,通过将其打印在控制台上来处理缺少的依赖。

3. 模块中的 ES6 import/export 语法

Webpack 2.x 对于 ES6 的 import/export 语法进行了原生支持,因此如果你的代码中还写着 commonJS 的require方式引入,可以通过下面的方式来修改。

修改前:

修改后:

4. 修改 loaders 配置

Webpack 2.x 支持加载器的配置可以通过 options 散列或是通过统一的 loaderOptions 名称来指定,因此在升级时需要对未来用到的 loader 进行修改配置。

修改前:

修改后:

-- -------------------- ---- -------
-------------- - -
  ------- -
    ------ -
      -
        ----- ---------
        ---- -
          - ------- -------------- --
          - ------- ------------ -
        -
      -
    -
  -
-
展开代码

5. 使用环境变量来管理

Webpack 2.x 支持通过环境变量(NODE_ENV)来判断是否使用生产、开发环境的配置。可以通过链式调用的方式对环境变量进行设置。

-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------

-------------- - --- -- -
  ----- --- - ------------ --- -----
  ------ -
    ------ -------------
    ------- -
      --------- --- - --------------- - --------------------------
      ----- ----------------------- -------
    --
    -------- -
      --- ---------------------------------
        --------- -
          --------- -----
        -
      ---
      --- ----------------------
        ----------------------- ----------------------------
      --
    -
  -
-
展开代码

6. 结合 Webpack 2.x 的新特性进行优化

Webpack 2.x 提供了许多新特性来帮助我们优化性能,如主动的 elimination of unreachable code,Scope Hoisting 等等。例如:

-- -------------------- ---- -------
------ - ------ - ---- --------
-- ---- -------- ------
----- ------ - -------------------- --- ------------
----- -------------- - ------ - ---- - ---------------------
-- ------------------
------ -------- ------------------ ----- -
  ----- -------- - --------------
  ------ ------
-
------------------------------ - ------
展开代码

综上所述,升级 Webpack 2.x 后,需要进行的修改有:检查依赖、修改旧的 ES6 语法、修改 loaders 配置、使用环境变量来管理、结合新特性优化。如果引入了新的 webpack 版本,那么也应该考虑相关 loader 和库(如 babel)的使用是否需要升级。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c421e06e1fc40e36cfceb7

纠错
反馈

纠错反馈