专栏首页web前端教室【先行者】webpack学习笔记(节选)

【先行者】webpack学习笔记(节选)

这一段时间咱们主要搞一个前端开发的环境的配置,

因为许多同学有这方面的需求。

然后一节课未必讲得完,所以会分成二三次来讲。

<!-- -->

1、我在本地电脑 的d盘,新建一个目录,test_app,

做为开发的目录。

2、要全局的安装 webpack,

<!--

因为我的电脑已经全局的安装过了webpack,

所以就不再演示webpack全局安装的过程。

-->

全局安装 webpack,npm install webpack -g

在test_app目录中,局部的安装webpack,

npm install webpack --save-dev

咱们现在用的是 webpack 4.x

<!-- 我之前 已经使用 cnpm的源,所以速度会相对快一些。 -->

3、在test_app中,新建三个目录,

- config

- dist

- src

4、初始化

npm init -y,

-y的意思就是package.json里都按默认来设置

5、开始压缩一下试试看效果

。。。。

<!-- -->

webpack 4.x 它的默认的入口是src里面的index.js,

可以先运行webpack来打包。

webpack有二种打包环境,

- 开发环境,development

- 生产环境,production

在打包的时候,输入 webpack --model=development或production,

就没有警告了。

<!-- -->

它们的关系是这样,

webpack.dev.js,主要管一些压缩、打包、入口、服务、输出文件方面的事情;

package.json,主要负责一些依赖项、命令的定义之类的。

就是webpack跟业务有关;

package.json,它跟开发环境的配置有关。

<!-- -->

。。。。(略、略、略)

<!-- -->

今天的内容就么多,

下周日,咱们继续搞,

什么js的压缩啊,css中图片的处理,等等。

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【第8期】webpack入门学习手记(二)

    最近开始想要维护一个个人的公众号,初心是为了督促自己坚持做笔记,将学习的东西整理记录下来。更进一步的要求是提升动手能力、文章写作能力,和分享经验。终极目标就是为...

    siberiawolf
  • 一起升级技能,先行者课程学习笔记

    -- Js运行之前的那么一瞬间,生成一个活动对象(Active Object),简直AO对象。

    web前端教室
  • 【学习笔记】先行者课程0109-rotate3d_变量、堆、栈

    一,通过一个小例子,来学习一下css3 3d变换; 二,开始讲js,先从js变量开始说起, 说一下js的变量与内存中的栈的关系, 还有数据的“值传递”、“引...

    web前端教室
  • Webpack优化——将你的构建效率提速翻倍

    随着构建体系不断完善、构建体验不断优化,webpack 已经逐渐成为了前端构建体系的一大霸主,对于工作中的真正意义上的前端工程项目,webpack 已经成为了我...

    ConardLi
  • Webpack优化——将你的构建效率提速翻倍

    随着构建体系不断完善、构建体验不断优化,webpack 已经逐渐成为了前端构建体系的一大霸主,对于工作中的真正意义上的前端工程项目,webpack 已经成为了我...

    桃翁
  • 【Webpack】418- 深度优化 Webpack 性能,翻倍构建性能

    随着构建体系不断完善、构建体验不断优化,webpack 已经逐渐成为了前端构建体系的一大霸主,对于工作中的真正意义上的前端工程项目,webpack 已经成为了我...

    pingan8787
  • webpack4.0各个击破(5)—— Module篇

    使用webpack对脚本进行合并是非常方便的,因为webpack实现了对各种不同模块规范的兼容处理,对前端开发者来说,理解这种实现方式比学习如何配置webpac...

    大史不说话
  • webpack4.0各个击破(4)—— Javascript & splitChunk

    javascript之所以需要打包合并,是因为模块化开发的存在。开发阶段我们需要将js文件分开写在很多零碎的文件中,方便调试和修改,但如果就这样上线,那首页的h...

    大史不说话
  • Vue Webpack 组件化开发实践

    两千年余前,子贡问为仁,子曰:“工欲善其事,必先利其器。居是邦也。事其大夫之贤者,友其士之仁者”——语出《论语·卫灵公》。时隔这许久,欲问从业者,何以堪高效之为...

    晚晴幽草轩轩主
  • webpack4.0各个击破(1)—— html部分

    对于浏览器而言,html文件是用户访问的入口点,也是所有资源的挂载点,所有资源都是通过html中的标记来进行引用的。而在webpack的构建世界里,html只是...

    大史不说话
  • 前端的世界里没有“容易”二字

    这半年,你过得怎么样?新的热点技术学会了吗?写的代码还有bug吗?头发还好吗?还记得年初的 Flag 吗?

    桃翁
  • 微服务[学成在线] day02:CMS前端开发

    由于在学习该项目的过程中发现了原讲义存在的一些问题,所以该笔记基于「学成在线」微服务项目 PDF 讲义进行编写,并且投入了时间去优化了笔记的格式、代码的高亮、重...

    LCyee
  • 前端学习,理解并不是最重要的

    诚如标题所言,学习前端开发的过程中,是否理解并不是最重要的。那么,什么是最重要的呢?学习不就是要看懂才算吗?

    web前端教室
  • 【第7期】 webpack入门学习手记(一)

    之前用过gulp、grunt,但是一直没有学习过webpack。这两天刚好有时间,学习了下webpack。webpack要想深入研究,配置的东西比较多,网上的资...

    siberiawolf
  • webpack4.0各个击破(9)—— karma篇

    webpack对应的关键词是模块化,它的主要任务就是打包和管理模块,所以首先需要明确的概念就是webpack之所以关联自动化测试,是因为它能够为测试脚本提供模块...

    大史不说话
  • 使用vue做一个本地记事本(一)

    这个参考的是一个记事本的demo,为了面试学的vue,看了两天,觉得想要更快的上手最好还是做一个demo。这是我刚开始学的时候做的一些小demo,跟着文档来的。...

    仇诺伊
  • 用 Loom SDK 搭建的以太坊侧链上运行 DApp

    上一篇,我们在Loom 构建的DApp侧链上部署了智能合约[1],这篇文章就来基于侧链网络部署一个DApp(去中心化应用)。

    Tiny熊
  • webpack4.0各个击破(2)—— CSS篇

    以webpack4.0版本为例来演示CSS模块的处理方式,需要用到的插件及功能如下:

    大史不说话
  • 辛辛苦苦学会的 webpack dll 配置,可能已经过时了

    如果大家看过一些 webpack 优化的文章,一定会出现 dll 动态链接库。它以配置之复杂让众多初学者记忆犹新。

    卤代烃

扫码关注云+社区

领取腾讯云代金券