webpack
文章平均质量分 60
hdchangchang
这个作者很懒,什么都没留下…
展开
-
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 · 4913 阅读 · 0 评论 -
webpack中babel配置 --- runtime-transform和babel-pollfill
转自:https://segmentfault.com/a/1190000014167121 webpack - babel配置babel是一个javascript编译器,是前端开发中的一个利器。它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法。通过构建和babel,可以使用最新js语法进行开发,最后自动编译成用于浏览器或node环境的代码。...转载 2018-10-12 09:59:41 · 4466 阅读 · 0 评论 -
vue-cli构建的项目中使用svg图标
参考:https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/参考:https://cisy.me/webpack-svg-sprite/1、安装插件:npm i -S svg-sprite-loader2、更改build/webpack.base.conf.js配置文件 ...原创 2018-08-26 21:53:28 · 6944 阅读 · 1 评论 -
webpack之引入css
前言:本文演示了如何打包css文件;涉及到的loader: css-loader、style-loader;css-loader的任务:把css文件作为模块打包style-loader的任务:把打包好的css文件动态的插入到html文件的<style>标签内正文:如何利用webpack把样式打包进我们的项目文件?在webpack的世界里,一起文件都是模块。默认webpack只会打包js...原创 2018-04-27 20:53:51 · 12115 阅读 · 0 评论 -
webpack之loader
前言:本文演示了处理react代码需要安装配置的babel-loader。正文:loader是webpack用来预处理模块的;在每一个模块被处理之前,会预先使用loader处理模块的内容;现在我们来安装babel-loader来处理一段react代码。首先,安装react和react-dom$ npm i -S react react-dom接着,改写我们的app.js如果现在执行 npm run...原创 2018-04-27 19:46:05 · 345 阅读 · 0 评论 -
webpack之打包初体验
前言:这篇文章创建了一个最简单的webpack项目;对webpack.config.js进行了最简单的配置;尝试着进行了一次最简单的webpack打包。正文:首先构建项目目录:$ mkdir webpack-pro1$ cd webpack-pro1$ npm init$ npm i -D webpack webpack-cli$ touch webpack.config.js...原创 2018-04-27 17:09:50 · 340 阅读 · 0 评论 -
webpack之html-webpack-plugin简单配置
前言:本文简单配置了webpack的一个插件:html-webpack-plugin;演示了html-webpack-plugin帮我们做的工作。正文:plugin是webpack一个比较重要的概念。当前webpack.config.js配置:const path = require('path'); module.exports={ entry :{ p...原创 2018-04-27 17:46:46 · 3715 阅读 · 0 评论 -
webpack之引入图片
前言:本文演示了webpack如何在css文件中引入图片; webpack如何在html中引入图片;需要安装配置的loader: file-loader;为何要使用file-loader:如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。 其中一个就是引用路径的问题。拿backg...原创 2018-05-02 16:59:30 · 7908 阅读 · 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 · 6781 阅读 · 0 评论 -
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 · 4702 阅读 · 1 评论 -
webpack之项目中引入字体
前言:本文演示了如何在项目中应用字体图标;用到的loader: file-loader正文:在common下面新建fonts文件夹,并在其中加入我们手动下载好的字体文件(这里使用开源项目Ionicons):编辑我们的style/main.css文件。在app.js中引入main.css文件:这里根据以往经验,我们知道这里需要一个loader来处理我们的字体图标。这里,我们需要loader帮我们做两...原创 2018-05-04 07:56:42 · 8373 阅读 · 0 评论 -
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 · 2620 阅读 · 0 评论 -
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 · 8275 阅读 · 0 评论 -
webpack之输出路径处理
前言:本文演示了如何通过配置webpack.config.js来优化最后build成功的dist目录。最后留了一个问题待解决正文:紧接上文《 webpack之重新认知babel-loader 》项目目录:执行 npm run build之后,查看dist下面打包结果,简直乱作一锅,我们原本src下目录结构规划的很好啊(¬_¬)!优化dist目录目标目录结构:1、安装插件clean-webpack-...原创 2018-05-05 22:45:27 · 17006 阅读 · 0 评论 -
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 · 159630 阅读 · 5 评论 -
webpack中使用FastClick
为什么要使用FastClick移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。项目地址:https://github.com/ftlabs/fastclick 不需要使用fastclick的情况以下这几种情况是不需要使用fastclick:1、FastClic...原创 2018-10-12 10:54:51 · 897 阅读 · 0 评论