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
