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
下的模块,通过将其打印在控制台上来处理缺少的依赖。
// 输出模块的名称和路径 Object.keys(require.cache).forEach(function(id) { if (/[\/\\]node_modules[\/\\]/.test(id)) { console.log(`${id}: ${require.cache[id].id}`) } })
3. 模块中的 ES6 import/export 语法
Webpack 2.x 对于 ES6 的 import/export 语法进行了原生支持,因此如果你的代码中还写着 commonJS 的require方式引入,可以通过下面的方式来修改。
修改前:
const foo = require('./foo') export default foo
修改后:
import foo from './foo' export default foo
4. 修改 loaders 配置
Webpack 2.x 支持加载器的配置可以通过 options
散列或是通过统一的 loaderOptions
名称来指定,因此在升级时需要对未来用到的 loader 进行修改配置。
修改前:
module.exports = { module: { loaders: [ {test: /\.css$/, loader: 'style!css'} ] } }
修改后:
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- --------- ---- - - ------- -------------- -- - ------- ------------ - - - - - -展开代码
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