xyphf的博客

vite和webpack的区别?

config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('sv...

如何查看手机浏览器的日志？手机浏览器日志如何同步到电脑？电脑上如何查看手机浏览器的日志？本文主要讲述iphone手机浏览器的console.log日志如果同步到MAC电脑上。Web Inspector是Web开发人员用来在Mac和iOS设备上修改，调试和优化网站的工具。在iOS 6之前，iPhone的Safari Web浏览器具有内置的调试控制台，开发人员可用来跟踪网页缺陷。如果您的i...

www.npmjs.com创建一个vue-toast-demo目录进入目录 cd vue-toast-demonpm初始化  npm initpackage name: (vue-toast-demo)  // 插件名version: (1.0.0)                // 插件版本description: a toast plugin for mobile // ...

编写app.js// es module 将sum文件引入到app.js里面来import sum from "./sum"//common.js 语法引入minus.js文件var minus = require('./minus')//AMD 语法引入muti.js文件require(['./muti'], function(muti) { console.log(...

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

图片处理1.css背景图片的处理我们设置一张图片背景//a.cssbody { background: url(../images/timg.jpg) repeat-y;}#root { color: yellow;}运行npm run dev,我们发现又报错,提示我们缺少一个loader处理图片涉及两个loader,分别是url

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

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

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

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

官网： http://webpack.github.io/首先我们了解webpack是什么？    前端工程师，必不可少的工具.安装官网的解释我们可以看到显示的bundle your assets,bundle your images,bundle your script,bundle your style,说白了bundle就是打包的意思.    bundle your assets 打包你的静...

在此之前我们在看一下 AngularJS构建单页面应用WebApp目录介绍为了将源码合并和压缩，用于节省http请求和带宽，这在移动端是非常有必要的。Gulp这个工具有两个优点： 第一：它是基于流来实现，这样就决定了它的性能非常的高。简单的说它就是把那些产生的中间文件放在内存中进行处理，直到最后一步才生成文件、操作文件。 第二：它实际上是任务化的，我们编写配置文件，实际上是编写一个一个...

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

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

使用第三库: 1. 直接npm下载，然后引入（完全可以使用，但是我个人不是很推荐） cnpm i jquery -S import $ from 'jquery' $(xxxx).on() $(xxx).css()ProvidePlugin (个人推荐此方式)const webpack = require('webpack');

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

调试webpack4.x 开启调试--mode developmentwebpack3.x之前在webpack.config.js中添加devtool: 'source-map', //开启调试功能,上线之前需将此行注释babel:编译JS-babel用来编译js- 让你很轻松的使用ES6 7 等,帮助转化在src下新建一个src/js/