什么是webpack

与前端结缘

  我是后端研发,毕业四年,用了四年C#,一开始写ASP.NET,有时会在asp页面写简单的js和html,做点css样式调整。当时的感触是前端调试太费劲了,因为没有js、html、css基础,出点样式或者js的问题,能难为很久。2014那会儿前端的概念还不清晰,当时所在的公司设置的职位也没有前端工程师,那会儿叫美工和切图。当时负责美工和切图的姐姐,原来的工作是文字编辑,换成现在的说法是自媒体运营。她刚生完孩子,觉得文字编辑工资太低,所以转岗做美工和切图,职业跨度的难度相当大,那时没有感触,现在轮到自己学前端的时候,才真的感觉到那个姐姐决心和毅力很大。
  我在上面提到了工资,说点自己的感受,编程语言里C#的整体上工资相对较低,国内较大的互联网公司,使用Java和PHP较多,工资增长幅度最高的是Java。不提无论什么语言,成为大牛,工资自然不愁这种话,只说大多数,首选Java和PHP方面的工作比较好,当然前端更好。
  当然微软的生态有越来越好的趋势,.NET CORE 和ASP.NET
CORE的呼声也越来越大,这次百度前端技术学院推荐使用的编辑器Visual Studio
Code是微软同期推广的,或许过两年,.NET在国内的境况会有长足改善吧。
  14年所在公司做.NET的小伙伴,有人转了PHP,有人转了前端,有人去做了需求分析师,有人转了Java,还在做.NET的越来越少,所以.NET的境况可见一斑。

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题
+
解决方式
的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本

Webpack是一个现代JavaScript应用程序的静态模块打包器。它把你的项目当做一个整体,通过给定的入口文件开始找到你的项目所有依赖模块,使用loaders处理它们,最后打包为一个或多个浏览器可识别的JavaScript文件,可以减少页面请求,优化网页性能。

为钱而工作

  前端从15年开始大火,火到现在热度不减,我认识的很多后端技术过硬的人纷纷转投前端阵营,大概年纪越大越喜欢钱吧,他们多数是因为前端工资更高而转投前端的怀抱。回想起刚毕业时,为代码改变世界这句话会热血沸腾很久,内心真是五味杂陈。工作久了会有职业倦怠感,一定要解决职业倦怠感,不然那种一整天的工作之后空洞的感觉很让人沮丧。其中一个解决办法是,为自己的工作赋予一个高尚的意义,但其实我很难说服自己不是因为钱才工作的。

图片 1

如何使用Webpack

看到酷炫的网站,单纯也想做到,这很好

  不要指望工作里能有机会做很酷炫的网页,大多可能性是,工作之后要重复的造轮子,做一点都不酷炫,甚至粗陋的网页。所以,还是要驱动自己在工作之余,为自己建立一个自留地,在上面天马行空去做很炫酷的网页。
  任务描述浏览里提到的类似
带有github.io的网站,是github的一项福利GitHub
Pages ,可以利用GitHub
Pages自己去搭建网站,很省钱,不需要买域名和vps服务器。

图片 2

一、安装node JS
(webpack在执行打包压缩的时候是依赖nodejs的),请参考node
JS官网进行下载安装

一. Integration

下文摘自webpack中文网:

首先我们要消除一个常见的误解,webpack是一个模块打包工具(module
bundler),它不是一个任务执行工具,任务执行器是用来自动化处理开发中常见任务的,例如检查(lint),构建(build),测试(test)等。相对于打包器,任务执行器所面对的逻辑问题更为上层,你可以使用上层的工具来管理整个持续集成(CI),而把打包的部分交给webpack

webpack在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动webpack,本文介绍两种常见的方法。

二、初始化一个node js模块

1. 使用Node-API

webpak暴露了一些方法,使得开发者可以通过调用他们而在脚本中启动webpack,使用的方法较为简单:

//webpack-node.js
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.html.js');
const cowsay = require('cowsay');

const compiler = webpack(webpackConfig);

compiler.run((err, stats)=>{
   if (!err) {
        console.log(stats.toJson().assets);
        console.log(cowsay.say({text:'Congratulations!'}));
   }

});

运行结果:
图片 3

这里解释一下上面代码的基本逻辑,引入了webpack模块以及webpack.config.html.js的配置文件(从这里就很容易理解为什么webpack的配置文件可以导出为一个函数或多个配置,它实际上也是作为一个模块参与到整个运行过程的),通过调用webpack([Object config])方法得到一个compiler实例,调用compiler.run方法就启动了webpack的构建功能,run方法的回调函数中如果有运行错误,可以通过err来获取,与构建过程有关的信息都挂载在stats对象(例如stats。toJson().assets)。这样便实现了以非命令行的方式启动webpack

1、创建一个目录并在终端中进入当前目录执行npm
init -y

2.使用gulp

gulp是基于流的任务管理工具,实际上webpack的细分功能使用gulp也可以做到,而且很多功能型插件都会提供针对grunt,gulpwebpack等不同工具的集成方式。gulp的确更适合做宏观意义上的任务流管理,还是那句老话,工具是提供便利的,而不是提供束缚的。官方文档也提供了如下代码示例:

//gulpfile.js
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default',function(){
    return gulp.src('src/entry.js')
        .pipe(webpack({
        //...configs
    })).pipe(gulp.dest('dist/'));
})

2、安装webpack和webpack-cli(命令行工具):

二. after webpack

至此,webpack已经被集成进了自动化工具链,开发者可以按自己的需求来定制构建以后需要执行的任务,但webpack的使命还没有结束,构建的结束距离用户能够访问站点和使用功能还需要非常多的工作要做,有很多问题并不是在构建中出现的,但是却需要在构建时加以处理,这个时候开发者又需要回过头来为webpack增加配置。

例如很多开发者最初不理解构建过程中为什么要使用hash,chunkhash等占位符来把文件名变得丑陋无比,直到不同版本的产品上线时出现不强制刷新页面就无法访问新资源的问题时,才会开始关注版本更新和缓存策略的问题,然后才会理解为了标记版本而启用hash,为了避免重复构建而使用chunkhash,为了减小体积而使用tree-shaking等等。

npm install webpack webpack-cli
–save-dev

三. 商务吹捧走一波

webpack4.0各个击破》全系列文章就连载结束了,感谢您的关注,希望对你有所帮助,你也可以通过以下方式查看我的其他博文。

博客园地址:

或者使用淘宝镜像安装,请直接百度“npm
淘宝镜像”,安装过淘宝镜像后再安装其他安装包时可直接把上面命令行的npm替换成cnpm

下面是我的目录结构(除了node_modules和package.json是自动生成的,其他文件都要手动添加)

图片 4

 

 三、打开webpack.config.js文件,定义入口和输出

图片 5

 

四、在package.json文件中添加一个npm脚本,这样运行本地的webpack比较方便

图片 6

 

五、在终端中运行 npm run
build 就可以在dist文件夹下生成打包后的bundle.js文件

图片 7

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注