最近在学习webpack的总结,不完善的希望各位提出宝贵的建议。本篇是以webpack3.0版本为基础的学习总结。

一.webpack的概念及作用

wepack是一个模块打包兼优化工具。往往一个项目中,有众多的的依赖包和繁琐的js文件,有时还要解决sass,less,....等新增样式的编译工作,所以在项目的开发中需要webpack作为辅助工具,而3.0版本肩负起了优化项目的责任。

1.打包:把多个js文件打包为一个文件,来减少服务器的压力和下载贷宽。

2.转换:把拓展语言转换为普通的js文件,让浏览器顺利运行。

3.优化:优化和提升性能的责任。

二.webpack的安装

1.win+R打开任务栏,先安装node工作环境(自行脑补)。

2.创建文件名称。及mkdir <project-name>,创建一个文件。

3.然后安装webpack.及npm install webpack --g.(这里的--g,是全局安装。也可以是--save,局部安装。建议是局部安装)。

4.要对webpack进行初始化,及npm init对项目进行初始化。(其中生成的package.json文件,就是说明一些项目的基本信息)。

5.最后一步就是项目的目录安装,及npm install --save-dev webpack.(其中,--save:是说明要保存到package.json文件中。-dev:是在开发环境中使用的包,在生产环境中不使用)。

这样基本的webpack的工作已经完成,接下来就可以尽情的玩耍了。

(敬请期待下次分享)

webpack初学者(1)的更多相关文章

  1. 初学者的React全家桶完整实例

    概述 该项目还有些功能在开发过程中,如果您有什么需求,欢迎您与我联系.我希望能够通过这个项目对React初学者,或者Babel/webpack初学者都有一定的帮助.我在此再强调一下,在我写的这些文章末 ...

  2. [03] react 测试

    测试是开发周期中的一个重要组成部分.没有测试的代码被称为:遗留代码.对于我而言,第一次学习 React 和 JavaScript 的时候,感到很有压力.如果你也是刚开始学习 JS/React,并加入他 ...

  3. Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  4. webpack学习笔记(二)-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  5. webpack安装与配置初学者踩坑篇

    webpack是基于nodejs开发出来的前端工具 webpack可以处理js文件的依赖关系,webpack能够处理js的兼容问题,把高级浏览器不识别的语法转换成浏览器正常识别的语法 (jnlp是基于 ...

  6. vue-cli在webpack环境下怎样生成开发环境模板(适合初学者)

    1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://registry.npm.taobao.org 这是网址,可以自己用命令行工具输入命令 ...

  7. webpack配置命令

    从2015年开始,webpack就是当前最火的构建工具.跟着时代向前走.准没错.我们要追随大神的脚步.走在前端技术栈的前列.大神等等我. 由于webpack是基于nodejs环境下的.所以先安装nod ...

  8. reactjs学习一(环境搭配react+es6+webpack热部署)

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  9. gulp + webpack 构建多页面前端项目

    修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

随机推荐

  1. spring mvc 默认页面

    只需要在servlet.xml页面中添加如下配置: <mvc:view-controller path="/" view-name="login"/> ...

  2. 2018.08.20 loj#115. 无源汇有上下界可行流(模板)

    传送门 又get到一个新技能,好兴奋的说啊. 一道无源汇有上下界可行流的模板题. 其实这东西也不难,就是将下界变形而已. 准确来说,就是对于每个点,我们算出会从它那里强制流入与流出的流量,然后与超级源 ...

  3. sql join用法(转)

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...

  4. python面向对象-1方法、构造函数

    类是指:描述一种事物的定义,是个抽象的概念 实例指:该种事物的一个具体的个体,是具体的东西 打个比方: “人”是一个类.“张三”是人类的一个具体例子 在编程时也是同样的道理,你先自己定义一个“类”,当 ...

  5. Go并发编程基础(译)

    2015-05-20 三 By youngsterxyf 原文:Fundamentals of concurrent programming 译者:youngsterxyf 本文是一篇并发编程方面的入 ...

  6. (有点递归的感觉)RGCDQ--hdu--5317

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5317 感觉好神奇呀,一堆数在一起可以找到规律,学长讲完后,觉得自己是如此的so young f[x] ...

  7. Hdu1969 Pie 2017-01-17 13:12 33人阅读 评论(0) 收藏

    Pie Time Limit : 5000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submissio ...

  8. 切勿用普通for循环遍历LinkedList

    ArrayList与LinkedList的普通for循环遍历 对于大部分Java程序员朋友们来说,可能平时使用得最多的List就是ArrayList,对于ArrayList的遍历,一般用如下写法: p ...

  9. smarty-2014-02-28

    使用smarty,在tpl文件中如何使用相对路径调用css&javascript文件,实际上这个相对路径的参照物就是以调用该tpl文件的php文件来写. 假如,我在index.php这个文件中 ...

  10. SSH 安全建议

    当你查看你的 SSH 服务日志,可能你会发现充斥着一些不怀好意的尝试性登录.这里有 5 条常规建议(和一些个别特殊策略)可以让你的 OpenSSH 会话更加安全. 强化密码登录 密码登录很方便,因为你 ...