自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

coding...

此博客做为收集、整理、总结文献用

  • 博客(11)
  • 收藏
  • 关注

转载 nodejs全局安装路径的位置

转自:https://www.cnblogs.com/niuxiaoling/p/7993032.htmlnodejs安装在默认的C盘,如果不知道安装在哪里,可以打开控制面板-系统和安全-系统-高级配置中找到所谓全局安装:是指安装在node中node_module的根目录里,可以在电脑的任何位置调用这个方法。那么,如何在找到全局安装的位置呢?方法一:设置到自己想要放的位置:打开:nodejs安装目...

2018-05-22 11:05:40 36613

原创 webpack之publicPath

前言:本文解决了《 webpack之输出路径处理 》最后预留的路径问题正文:要解决《 webpack之输出路径处理 》最后预留的路径问题,只需要在webpack.config.js的output选项中添加publicPath配置。执行npm run build,在浏览器打开dist/index.html文件,所有资源均正常加载!但是,现在执行npm run dev,浏览器打开的http://loc...

2018-05-06 15:28:46 4943

原创 webpack之devServer配置

DevServer 是webpack开发服务器。首先,下载webpack-dev-server库$ npm i -D webapck-dev-server配置package.json:配置webpack.config.js当运行npm run dev的时候,devServer首先会在内存中创建类似的dist目录,在由浏览器打开进行预览。webpack-dev-server其它配置devServer...

2018-05-05 22:50:56 159766 5

原创 webpack之输出路径处理

前言:本文演示了如何通过配置webpack.config.js来优化最后build成功的dist目录。最后留了一个问题待解决正文:紧接上文《 webpack之重新认知babel-loader 》项目目录:执行 npm run build之后,查看dist下面打包结果,简直乱作一锅,我们原本src下目录结构规划的很好啊(¬_¬)!优化dist目录目标目录结构:1、安装插件clean-webpack-...

2018-05-05 22:45:27 17025

原创 webpack之重新认知babel-loader

前言:在《 webpack之loader 》中webpack.config.js对babel-loader进行了简单配置。这篇文章回到我们之前的webpack项目中,看看如何配置babel。正文:回顾之前babel-loader配置这篇文章紧接之前文章 《 webpack之使用less和scss 》。项目目录: package.json 配置。其中babel-core和babel-loader是核...

2018-05-05 19:01:43 8289

原创 webpack之babel讲解

前言:本文演示了如何安装配置babel基本命令如何安装配置babel插件如何配置.babelrc文件如何安装配置babel预设presets正文:babel 是一个强大的js编译器,功能包括不限于:es6编译成es5语法;编译jsx语法安装配置babel首先,创建项目目录,初始化npm$ mkdir babel$ cd babel$ npm init$ mkdir src$ cd src...

2018-05-05 16:45:16 2642

原创 webpack之使用less和scss

前言:本文以sass为例,演示了项目中如何配置应用sass文件。如何让sass文件同样支持模块化。其实,应用sass或者less,是指先将文件交给sass-load或者less-loader处理成css文件,然后再交给css-loader、style-loader进行处理。如果你的项目中使用了scss。安装sass-loader、node-sass$ npm i -D sass-loader no...

2018-05-04 15:28:34 7099

原创 webpack之项目中引入字体

前言:本文演示了如何在项目中应用字体图标;用到的loader: file-loader正文:在common下面新建fonts文件夹,并在其中加入我们手动下载好的字体文件(这里使用开源项目Ionicons):编辑我们的style/main.css文件。在app.js中引入main.css文件:这里根据以往经验,我们知道这里需要一个loader来处理我们的字体图标。这里,我们需要loader帮我们做两...

2018-05-04 07:56:42 8384

原创 webpack之css模块化

前言本文演示了如何开始css模块化;如何选择性的开启部分css文件的模块化功能;如何让模块化后写入html的class更具有可读性;涉及到的loader: css-loader、style-loader开启css-loader的模块化配置当前项目目录和package.json配置::如何使css模块化?需要在我们的webpack.config.js中对css-loader进行一些额外设置。编辑ma...

2018-05-04 07:52:50 4725 1

原创 webpack之图片引入-增强的file-loader:url-loader

前言:本文介绍了url-loader(增强的file-loader); url-loader作用:根据需求选择性的把某些小图片编码成base64格式写进页面;从而减少服务器请求。优化性能。url-loader解决的问题:如果图片较多,会发很多http请求,会降低页面性能。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中...

2018-05-03 14:50:48 6803

原创 webpack之引入图片

前言:本文演示了webpack如何在css文件中引入图片; webpack如何在html中引入图片;需要安装配置的loader: file-loader;为何要使用file-loader:如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。    其中一个就是引用路径的问题。拿backg...

2018-05-02 16:59:30 7941 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除