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对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
随机推荐
- part1:7-Linux网络配置
1.虚拟机(Vmware)网络配置 VMware虚拟机对于不同的网络环境提供了三种网卡工作模式: Bridged:网桥模式: 在桥接模式下,计算机A充当路由器与虚拟机之间的“桥”,虚拟机通过计算机A的 ...
- python数据类型4
一浮点数 什么叫做浮点数:浮点数就相当于小数,但是浮点数不包括无限循环又不重复的小数. 小数分为 有限小数和无限小数 无限小数又分为 无限循环小数和无限不循环小数 而 浮点数就是有限小数和无限循环小数 ...
- xampp虚拟主机的配置
ps:来源 https://blog.csdn.net/qq_17335153/article/details/52091869 一.修改httpd.conf 文件目录 xampp => ...
- [转]关于docker包存储结构说明
原文:http://blog.csdn.net/w412692660/article/details/49005631 前段时间与同事交流docker的安装包层次结构,并沟通相关每个文件的作用,但是一 ...
- 解决Docker时区与主机时区不一致的问题
在Dockerfile里面增加以下红色的部分 FROM hub.chinacloud.com/common/jdk:8MAINTAINER xxx@chinacloud.com.cn RUN mkdi ...
- 都有哪些 cache ?
1. spring http://www.springframework.org/schema/cache 2. ehcache LOGO关键词:palindrome [ˈpælɪndrəʊm] 正读 ...
- jQueryUI datepicker 报错: TypeError: inst is undefined
前提:要引用的js等都引用好了 调用日期控件的input: <input id="starttime" name="starttime" class=&q ...
- Java内存模型(二)
volatile型变量的特殊规则 volatile是Java虚拟机提供的最轻量级的同步机制,当一个变量被定义成volatile后,它将具备两种特性,第一是保证此变量对所有线程的可见性,这里的“可见性” ...
- 让Easy UI 的DataGrid直接内嵌的JSON对象,并重写form load 方法
前言 我有这样的JSON对象 { "UserName": "jf", "UserPwd": "123456", &quo ...
- Asp.Net Web Api中使用Swagger
关于swagger 设计是API开发的基础.Swagger使API设计变得轻而易举,为开发人员.架构师和产品所有者提供了易于使用的工具. 官方网址:https://swagger.io/solutio ...