2018年05月_hdchangchang

转载 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

coding...