webpack初学者(1)
最近在学习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)的更多相关文章
- 初学者的React全家桶完整实例
概述 该项目还有些功能在开发过程中,如果您有什么需求,欢迎您与我联系.我希望能够通过这个项目对React初学者,或者Babel/webpack初学者都有一定的帮助.我在此再强调一下,在我写的这些文章末 ...
- [03] react 测试
测试是开发周期中的一个重要组成部分.没有测试的代码被称为:遗留代码.对于我而言,第一次学习 React 和 JavaScript 的时候,感到很有压力.如果你也是刚开始学习 JS/React,并加入他 ...
- Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- webpack学习笔记(二)-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- webpack安装与配置初学者踩坑篇
webpack是基于nodejs开发出来的前端工具 webpack可以处理js文件的依赖关系,webpack能够处理js的兼容问题,把高级浏览器不识别的语法转换成浏览器正常识别的语法 (jnlp是基于 ...
- vue-cli在webpack环境下怎样生成开发环境模板(适合初学者)
1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://registry.npm.taobao.org 这是网址,可以自己用命令行工具输入命令 ...
- webpack配置命令
从2015年开始,webpack就是当前最火的构建工具.跟着时代向前走.准没错.我们要追随大神的脚步.走在前端技术栈的前列.大神等等我. 由于webpack是基于nodejs环境下的.所以先安装nod ...
- reactjs学习一(环境搭配react+es6+webpack热部署)
reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study 或者使 ...
- gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
随机推荐
- 数据库链接 mybatis spring data jpa 两种方式
jdbc mybatis spring data jpa dao service webservice jaxrs jaxws springmvc w ...
- 简单的socket编程
1.socket 服务器搭建 实例化socket服务器,循环获取请求 package com.orange.util; import java.io.IOException; import java. ...
- android触控,先了解MotionEvent(一)
http://my.oschina.net/banxi/blog/56421 这是我个人的看法,要学好android触控,了解MotionEvent是必要,对所用的MotionEvent常用的API要 ...
- 前端之css语法3
一 float属性 1 基本的浮动规则: block元素和inline元素在文档流中的排列方式. block元素通常被现实独立的一块,独占一行.多个block元素会各自新起一行,默认block预算宽度 ...
- 2018.07.27 bzoj4695: 最假女选手(线段树)
传送门 线段树好题 支持区间加,区间取min" role="presentation" style="position: relative;"> ...
- I/O Planning
同一个BANK的电压必须是一样的,而电气特性则可以不同. 最近GTX调不出来,原来是电平不对 电源的影响 示波器看电源纹波 VCCO是为BANK的IO输出供电.比如LVCMOS33的信号,这个BANK ...
- Yarn application has already exited with state FINISHED
如果在运行spark-sql时遇到如下这样的错误,可能是因为yarn-site.xml中的配置项yarn.nodemanager.vmem-pmem-ratio值偏小,它的默认值为2.1,可以尝试改大 ...
- string转换成char*
string 是c++标准库里面其中一个,封装了对字符串的操作 把string转换为char* 有3中方法: 1.data 如: string str="abc"; char *p ...
- Codeforces777E. Hanoi Factory 2017-05-04 18:10 42人阅读 评论(0) 收藏
E. Hanoi Factory time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- D3_book 11.3 force
<!-- pie example --> <!DOCTYPE html> <meta charset="utf-8"> <style> ...