webpack探究（一）-前世今生

最新推荐文章于 2024-09-16 08:47:17 发布

yzp1119772269

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量443

点赞数

文章标签： javascript webpack 前端

本文链接：https://blog.csdn.net/yzp1119772269/article/details/108770911

版权

新技术的出现，由于浏览器不能及时的兼容一些特性，需要一些额外的处理才能实现，
对已有项目进行代码合并和压缩，
解析项目中的拓展语言：less，sass，ts...
在开发过程中添加诸如自动更新，本地代理等功能
以上这些，如果手动配置的话非常繁琐，而webpack就是来干这些脏活累活的

自动化构建工具的发展历程：

ant + YUI tool （基于java） ---> grunt/gulp(自动化构建工具) ---> rollup/parcel/webpack（模块打包工具）

const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function() {
  return src('src/*.js')
    // gulp-uglify 插件并不改变文件名
    .pipe(uglify())
    // 因此使用 gulp-rename 插件修改文件的扩展名
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

它改变了前端工程化

nodejs es5 es6 (拨乱反正)

webpack的起源

   2012年3月10号诞生
   作者德国人Tobias（写java的），这人从事将java转为js的研究（GWT），里面有个特性叫【code splitting】
   「code splitting」就是 Webpack 现在提供的主要功能

webpack的流行

   2014年，Instagram 的前端团队分享了他们对前端页面加载性能优化，其中很重要的一件就是用到的 Webpack的「code splitting」
   之后大家纷纷使用 Webpack，并给Webpack 贡献了无数的 plugins ，loader。
   plugins 也模糊了 module bundler 和 tasks 的界限，于是把前端 tasks，workflow工具 grunt gulp 取代了。