xyphf的博客

不断学习,追求卓越

如何开发一个npm插件,并发布到npm官网

www.npmjs.com 创建一个vue-toast-demo目录 进入目录 cd vue-toast-demo npm初始化  npm init package name: (vue-toast-demo)  // 插件名 version: (1.0.0)               ...

2018-12-06 01:59:57

阅读数 560

评论数 0

webpack使用不同的js语法规范引入打包模块

编写app.js // es module 将sum文件引入到app.js里面来 import sum from "./sum" //common.js 语法引入minus.js文件 var minus = require('./minus') //AM...

2018-10-26 11:01:13

阅读数 622

评论数 0

webpack4.x 图片处理补充之压缩

1.下载安装cnpm i image-webpack-loader -D2.配置 module:{ //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则 rules:[ { // test 表示测试什么文件类型 test:/\.css$/, ...

2018-04-07 19:25:13

阅读数 1871

评论数 0

webpack4.x 配置下载第三方库,分离js成单个文件引入HTML 第十节

使用第三库:  1. 直接npm下载,然后引入(完全可以使用,但是我个人不是很推荐) cnpm i jquery -S import $ from 'jquery' $(xxxx).on() $(xxx).css() ProvidePlu...

2018-04-07 17:09:23

阅读数 5842

评论数 0

webpack4.x webpack.config.json文件、静态文件输出的使用 第九节

在webpack中使用json配置 json-loader 到了webpack3.x以上版本之后就不用装了,json可以默认识别 在根目录下创建webpack.config.json文件,这里仅仅举例子,可以配置的很多 { "entry":"./...

2018-04-07 15:58:19

阅读数 2211

评论数 0

webpack4.x 配置调试、babel配置编译ESnext、JSX

调试 webpack4.x 开启调试 --mode development webpack3.x之前 在webpack.config.js中添加 devtool: 'source-map', //开启调试功能,上线之前需将此行注释 babel:编译JS -babe...

2018-04-07 15:22:10

阅读数 4173

评论数 1

webpack4.x 处理less、sass文件,分离编译后的css,自动添加css前缀,自动消除冗余css 第七节

处理less文件 我们创建一个src/less/a.less文件 @a:red; #div1{ color: @a; ul{ li{ list-style: none; height:30px; ...

2018-04-06 00:17:03

阅读数 8400

评论数 1

webpack4.x 背景图片的引入、是否转base64、以及分离CSS代码 第六节

图片处理 1.css背景图片的处理 我们设置一张图片背景 //a.css body { background: url(../images/timg.jpg) repeat-y; } #root { color: yellow; } 运行npm run de...

2018-04-05 22:42:40

阅读数 3922

评论数 1

webpack4.x 关于style-loader和css-loader的配置以及JS的生产环境压缩 第五节

loaders:在webpack里面是一个很重要的功能 表示加载器、转换器 通常情况下,webpack只对js文件提供支持,但是比如说less/sass/css/ES7等就不认识了,这时候就需要使用loaders来帮助它转化了. 接下来聊聊CSS的处理吧 这时就需要借助style...

2018-04-05 21:35:42

阅读数 7390

评论数 2

webpack4.x 如何配置webpack4.x 删除指定目录、配置devServer开发服务器、热更新等 第四节

如何每次生成dist目录前先删除dist目录 有朋友反映每次手动删除dist目录太麻烦了,能不能使用命令删除呢?答案是有的. 我们需要再安装一个模块 clean-webpack-plugin,用来删除某些东西(清除) 1.安装clean-webpack-plugin cnpm ...

2018-04-05 20:20:41

阅读数 4408

评论数 3

webpack4.x实现Js和Html多入口、多出口以及html-webpack-plugin插件实现html各自引入各自的js文件 第三节

Webpack4.x 多入口、多出口、hhtml-webpack-plugin插件的使用在目录下创建src目录,使用npm init -y 生成package.json依赖模块文件,我们把执行命令放在script里面,这样我们只要执行npm run build就可以了.{ "...

2018-04-05 11:30:32

阅读数 5507

评论数 0

webpack4.x 第二节

webpack4.x 打包初体验在根目录下建一个src(源码)目录在建一个dist(打包后)目录在src下建一个入口文件,index.js// index.js var oRoot = document.querySelector("#root"); oRoot...

2018-04-04 23:16:22

阅读数 912

评论数 3

webpack4.x基础介绍 第一节

官网: http://webpack.github.io/首先我们了解webpack是什么?    前端工程师,必不可少的工具.安装官网的解释我们可以看到显示的bundle your assets,bundle your images,bundle your script,bundle your ...

2018-04-04 21:43:12

阅读数 807

评论数 1

webpack 4.x项目快速启动

本次项目基于node 8.4 环境,低版本跑不起来勿吐槽。webpack至少要是4.1.0以上版本。 win10系统运行cmd窗口,需要选择“以管理员身份运行” 下面贴出所有的demo代码 package.json { "name": &a...

2018-04-01 12:15:37

阅读数 1533

评论数 0

配置自动化构建工具Gulp

在此之前我们在看一下 AngularJS构建单页面应用WebApp目录介绍 为了将源码合并和压缩,用于节省http请求和带宽,这在移动端是非常有必要的。 Gulp这个工具有两个优点: 第一:它是基于流来实现,这样就决定了它的性能非常的高。简单的说它就是把那些产生的中间文件放在内存中进行处理,...

2017-09-14 08:17:46

阅读数 363

评论数 0

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