webpack版本升级的差异大版本更迭

最新推荐文章于 2024-06-25 10:57:16 发布

李志佳

最新推荐文章于 2024-06-25 10:57:16 发布

阅读量671

点赞数

本文链接：https://blog.csdn.net/weixin_50040217/article/details/116154446

版权

webpack版本升级的差异大版本更迭

webpack和gulp最大的区别在于它是一个打包工具，它串联起了整个前端工程化的每一项内容。我非常庆幸的是经历过webpack1到2的升级，也经历了2到3的升级，打包的相关内容也越来越多。如今webpack从3变成4，很多人抱怨webpack的配置太过于复杂，在webpack4以后它的配置会变得越来越简单，对于开发者来说，entry，output，loader，plugin四大板块是必须要清楚的
1.entry
2.output
3.loader
4.plugin
Webpack1到2最大的升级是tree-shaking，其次是配置文件的对象化，再其次包括插件的写法优化。Webpack2到3的最大升级是scope-hoisting。3到4简化了整个打包配置操作

1.code-spliting

//code-spliting是一个（代码分割）应该是所有前端都知道的优化点,当你单页面做越做越大的时候，非首屏的页面就会考虑到不优先加载。但是怎么去划分懒加载的包，高
//效的方法就是路由懒加载
//在vue路由使用的时候，可能会考虑到除了第一页的内容，不会预先加载，会延长加载后面几页的功能。比如下几个页面成为3个js包，这样的代码分割，在大型的单页面应用
//中，我们必须使用到因为后面的页面我们就不需要提前加载
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
  {
    path: '/',
    component: resolve => require(['../views/Map'], resolve),
  },
  {
    path: '/setting',
    component: resolve => require(['../views/Setting'], resolve),
  },
  {
    path: '/cities',
    component: resolve => require(['../views/Cities'], resolve),
  },
];
const router = new VueRouter({ mode: 'history', base: '/app/', routes });

随着webpack2语法的进化，上面的代码也可以被写成如下的样子

import Vue from 'vue';
import VueRouter from 'vue-router';
const routes = [
  {
    path: '/',
    component:() => import('../views/Map'),
  },
  {
    path: '/setting',
    component: () => import('../views/Setting'),
  },
  {
    path: '/cities',
    component: () => import('../views/Cities'),
  },
];
const router = new VueRouter({ mode: 'history', base: '/app/', routes });

每个懒加载的背后都附送一个钩子。使用了code-splitting,webpack会根据你可以将一些首屏不显示的内容额外打包成为一个独立的js。webpack2中懒加载打包会连同样式以内的形式一起打入js中,这样的好处在于公共样式也被细化抽离，但是可能会造成样式的冗余。webpack3则提供了ExtractTextPlugin中提取了抽取公共样式的方法，公共样式可以额外进

tree-shaking

tree-shacking是rollup提出的一款技术，反哺到了webpack2的升级版本中。这可以说是一个非常难理解的一个概念，就像lodash这样的公共方法，在项目编写会积累的越来越多，但我们不希望将这些方法全部打包入一个js文件当中，常见的几种方法有：
   1.项目名解耦，将一个大型项目拆分成几个小项目
   2.使用tree-shaking,它只打包有用的方法，没有用的方法则不会进行打包
   tree-shaking默认是不会触发的，在webpack3，你需要配置babel，uglifyjs-webpack-plugin等才能触发。在webpack4，production模式默认触发。首先在编写代码过程中必须使用的，当纯函数对于tree项目打包有相当大的优势，也就是你的变量尽量要保持函数间的干净，不要相互污染

scope-hoisting

它的中文名就是作用域提升，这个名字非常熟系。说到底，javascript的模块化就是通过闭包来实现作用域的隔离，但是当我们模块化程度达到一定程度之后，过多闭包会让某些变量没法销毁，造成性能劣势。作用域提升即是把两个闭包合成一个闭包。

mode配置选项

代替definePlugin,可设置为development/production/none
当mode为development时，process.env.node_env为development,反之，process.env.nede_env为production
默认值:production
也可以通过webpack --mode 'development | production’来设置当前的环境
当mode:development时，会启用Namedchunksplugin和NameModulesplugin
当mode为production时，会启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin和uglifyjsplugin等插件

loader使用规则

webpack 3支持loaders与rules写法，但是webpack 4 废弃loaders写法，只支持rules
vue-loader 15必须使用VueLoaderPlugin插件

CommonsChunkplugin:代码拆分插件

webpack3的代码拆分插件webpack.optimize.commonsChunkPlugin已经从webpack4中移除了，可使用optimization.splitChunks进行代码拆分(提取公共代码)
同级的配置optimization.runtimeChunk,可拆分runtime文件