webpack学习笔记 (一)

 

一、安装nodejs;

点击打开nodejs官方站点;

点击下图框住的按钮,下周nodejs安装包;

安装下载好的安装包。

安装完毕之后,在cmd中输入node -v查看是否已经安装成功 
 
如果有版本号显示,则代表安装成功!!!

 

二、使用nodejs自带的npm,安装cnpm(淘宝镜像)

在cmd中输入npm install -g cnpm –registry=https://registry.npm.taobao.org 

即可将npm指向国内镜像源,之后输入cnpm -v 
这里写图片描述 
接下来我们就可以用cnpm代替npm了

 

三、使用cnpm安装webpack

在cmd中输入cnpm install webpack -g

在cmd中输入webpack -v

表示安装完毕!

 

四、新建项目

新建文件夹webpacktest

 

五、打开cmd,打开新建项目文件夹

 

六、初始化cnpm

在cmd中输入cnpm init

在文件夹下出现package.json

  表示完成初始化

 

七、在目录下安装webpack

在cmd中移到项目下,输入 cnpm install webpack 

 

八、安装css-loader和style-loader

在cmd中输入cnpm install css-loader style-loader安装(在项目下安装)

安装完毕以后,就可以使用webpack处理css了

 

九、安装插件 webpack-dev-server

# 安装

cnpm install webpack-dev-server -g

# 运行

webpack-dev-server --progress --colors

在cmd中输入webpack-dev-server -v

表示安装完毕!

我们使用 webpack-dev-server 开发服务,这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

 

未完待续~

 

转载于:https://www.cnblogs.com/sunflowerGIS/p/6820571.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370774.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

将涡轮增压器添加到JEE Apps

我扮演的关键角色之一是在本地社区中传播Akka。 作为讨论的一部分,人们通常会想到的问题/疑问是Akka如何针对编写良好的Java / JEE应用程序提供更好的可伸缩性和并发性。 由于底层硬件/ JVM保持不变,因此参与者模型如何比传统的JEE应用程序发挥更多的功…

MapReduce的工作原理

一、MapReduce模型框架 MapReduce是一个用于大规模数据处理的分布式计算模型,最初由Google工程师设计并实现的,Google已经将完整的MapReduce论文公开发布了。其中的定义是,MapReduce是一个编程模型,是一个用于处理和生成大规模数据…

react实现多行文本超出加省略号

http://www.css88.com/archives/5206 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 根据该文章方法,放在react项目中发现并不能实现,仔细观察发现原来react解析出来的css样…

qq群 html,我的群组-普通群组.html

我的群组-普通群组$axure.utils.getTransparentGifPath function() { return resources/images/transparent.gif; };$axure.utils.getOtherPath function() { return resources/Other.html; };$axure.utils.getReloadPath function() { return resou…

查看PLC IP 端口_西门子828D数控系统X130接口通讯怪异现象(X130手动设置的 IP)...

西门子828D数控系统,调试PLC过程中遇到网络通信怪异问题(不能直连非要加个路由器),笔记本电脑的以太网网络直接连接显示网络电缆被拔出,如下图所示:奇怪,怎么出现这种情况了呢,因为我用这台电脑调试过别的P…

bzoj1263

贪心 n%31 分出一个4&#xff0c;其余用3&#xff0c;n%32&#xff0c;分出一个2&#xff0c;其余用3&#xff0c;然后高精度就行了 #include<bits/stdc.h> using namespace std; const int N 5005; struct BigInt {int len;int a[N];BigInt() { memset(a, 0, sizeof(a)…

c语言volatile_[技术]为什么单片机C语言编程时某一变量有时乱码

最近一个项目里面&#xff0c;在KEIL中用C语言在单片机里面定义了一个状态机全局变量&#xff0c;这个变量随时会改变&#xff0c;用于切换触摸屏的界面&#xff0c;可是程序运行中出现了一个问题&#xff0c;这个状态机号总是出现了被莫名奇妙改变的问题&#xff0c;导致触屏不…

微型计算机2017年9月上,2017年9月计算机一级考试WPS Office冲刺题

2017年9月计算机一级考试WPS Office冲刺题2017年下半年计算机一级考试将在9月份进行&#xff0c;为了方便考生备考计算机一级考试。下面是小编为大家带来的计算机一级考试WPS Office冲刺题&#xff0c;欢迎阅读。冲刺题一&#xff1a;1、PowerPoint 演示文稿和模板的扩展名是【…

11尺寸长宽 iphone_弱电工程LED显示屏尺寸规格及计算方法

前言&#xff1a;led屏幕在生活中&#xff0c;随处可见&#xff0c;显示屏、广播屏等等&#xff0c;但是led尺寸怎么计算的&#xff0c;你知道吗&#xff1f;今天我们一起了解一下led屏幕尺寸的计算方法。正文&#xff1a;一、点间距的计算1、各单元板常见型号及尺寸LED屏普遍是…

marquee标签的使用

<!DOCTYPE html> <html> <head><meta charset"utf-8" /><title>演示marquee</title><style type"text/css">*{padding: 0px;margin: 0px;}marquee{border: 1px solid purple;}img{width: 360px;height: auto;}&…

32位数据源中没有mysql_[SpringBoot实战]快速配置多数据源(整合MyBatis)

前言由于业务需求&#xff0c;需要同时在SpringBoot中配置两套数据源&#xff08;连接两个数据库&#xff09;&#xff0c;要求能做到service层在调用各数据库表的mapper时能够自动切换数据源&#xff0c;也就是mapper自动访问正确的数据库。本文内容&#xff1a;在SpringbootM…

考研计算机冷门学校,考研5个冷门的985院校 别随大流,这些几所也是很不错的...

导语&#xff1a;想必大家考研的目的有很多&#xff0c;最主要的就是想去更好的学校提升自己&#xff0c;大部分会肯定是会更倾向于985这类的院校&#xff0c;每年其实除了那些被“挤破头”的985院校&#xff0c;其实还有不少“低调”的985院校是非常值得报考的&#xff0c;下面…

名为 cursor_jinserted 的游标不存在_质量工程师必须了解的测量常识,你不知道怎么行...

01测量器具的分类测量器具是一种具有固定形态、用以复现或提供一个或多个已知量值的器具。按用途的不同量具可分为以下几类&#xff1a;1. 单值量具只能体现一个单一量值的量具。可用来校对和调整其它测量器具或作为标准量与被测量直接进行比较&#xff0c;如量块、角度量块等。…

bzoj4869

http://www.lydsy.com/JudgeOnline/problem.php?id4869 终于A了。。。参考了下dalao的代码。。。 拓展欧几里得定理&#xff0c;改了几次就不变了&#xff0c;但是用的时候要在快速幂里判是不是要用。 #include<bits/stdc.h> using namespace std; typedef long long ll…

一张图一个表——CSS选择器总结

CSS选择器总结&#xff1a; (这些表是一张图片^_^) 看底部 完整思维导图图片和表格的下载地址&#xff1a;https://download.csdn.net/download/denlnyyr/10597820 &#xff08;我不想选择要积分币下载的&#xff0c;但那里最低必须选择1个积分……&#xff09; 参考文献&…

native层 安卓_安卓逆向——拼xx协议java层分析

制丨阿星整理丨阿星老铁们大家好&#xff0c;今天小编给大家带来很实用的技巧叫拼xx协议java层分析&#xff0c;有啥不足的地方望大家指点指点&#xff01;首先抓包 反编译这个时间段我们方法剖析一下找到onclick 看他的走向找到方法的地方都是在进行写入 所以我们直接分析结果…

Java集合框架图

转载于:https://www.cnblogs.com/areyouready/p/6835279.html

JavaScript学习第一天(一)

JavaScript介绍 JavaScript一种直译式脚本语言&#xff0c;是一种动态类型、弱类型、基于原型的语言&#xff0c;内置支持类型。它的解释器被称为JavaScript引擎&#xff0c;为浏览器的一部分&#xff0c;广泛用于客户端的脚本语言&#xff0c;最早是在HTML&#xff08;标准通用…

折半查找的思想及源码_常用排序与查找算法

1 选择排序选择排序(Selection sort)是一种简单直观的排序算法。它的工作原理是&#xff1a;第一次从待排序的数据元素中选出最小(或最大)的一个元素&#xff0c;存放在序列的起始位置&#xff0c;然后再从剩余的未排序元素中寻找到最小(大)元素&#xff0c;然后放到已排序的序…

滚动视差?CSS 不在话下

何为滚动视差 视差滚动&#xff08;Parallax Scrolling&#xff09;是指让多层背景以不同的速度移动&#xff0c;形成立体的运动效果&#xff0c;带来非常出色的视觉体验。 作为网页设计的热点趋势&#xff0c;越来越多的网站应用了这项技术。 通常而言&#xff0c;滚动视差在…