方法一: https://www.babeljs.cn/setup#installation 按照babel官方的配置配 方法二: https://www.jianshu.com/p/ce28ceddda72 上面是人家大神的地址, 写的明明白白:我觉得自己不会比他写的更详细了 补充一点就是:一定要注意babal的版本不能超过8.0 否则会报错, 至于8.0以后怎么用,按照方法一的官方配置去配  官方让下就下, 让键文件就建文件. babel-core和babel-preset-ev要严格按照人…

package.json中需要引入以下依赖:   开发依赖: "@babel/core": "^7.1.2", "@babel/preset-env": "^7.1.0", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.4”,   运行时依赖: "react": "…

用webpack打包项目的时候,一般喜欢把一些公用的库打包的vendor.js里面,比如像react,react-router,redux等. 随着引入的库越来越多,vendor文件也变得越来越大,于是考虑打包成两个vendor,把和react相关的库打包成一个vendor,其他的库打包成另外一个vendor.按照webpack的文档开始配置,需要注意有两个比较坑的地方. 参考配置: ... entry: { "vendor1": ["react", "r…

修改配置文件: /etc/resolv.conf nameserver DNS_IP_1 nameserver DNS_IP_2 nameserver 指定本机解析: /etc/hosts 主机IP ------>主机名-------->主机别名 172.16.0.1         www.magedu.com      www DNS-->/etc/hosts--->DNS 配置主机名: hostname     xxxxxxx 立即生效,但不是永久生效 配置一下 /etc/s…

1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机是实现代码分包(Code Splitting )和通过模块化完成代码的无缝集成.webpack可以根据项目需求合并代码,并且支持按需加载. webpack入门,可以参看:petehunt的Webpack howto webpack的实现目标是: 拆分依赖树(dependency tree)为多个按需…

如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack 的打包速度. 这篇文章以 vue cli3.0+,webpack4.0+,nodejs10.0+ 这几个版本为例. 一.打包分析 1.1.速度分析 我们的目的是优化打包速度,那肯定需要一个速度分析插件,此时 speed-measure-webpack-plugin 就派上用场了.它的作用如下: 分…

一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 .但是最近公司的一个项目只可以通过 localhost 访问. 需要配置一下,才可直接用局域网 IP 访问,方法如下: 给 dev 添加--host 0.0.0.0 属性: "scripts": {   "dev": "webpack-dev-server --inline --progress --config build/webpack.d…

2018年typescript发展的非常好,js是一门非常灵活的语言,所以一个功能,怎么写都能够写出来,但是这也会导致一个问题,不同人写js的方式不同,那么会导致同一个功能出现的代码风格会迥然不同.这样的话,如果是一个团队在做编程的过程中,每个人都按自己的语法去写代码的话,那么维护性就难以得到保证.   typescript是微软推出的一个产品,他规范了一套javascript的语法,当然他也支持原始的javascript语法.通过typescript最大的优势就是可以规范我们的代码.   同时…

在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带宽和资源. 雪碧图插件一般还支持快速引用小图标,例如当我们需要在html中放入service.png这张图片时,我们只需要使用<i class="icon icon-service"></i>这样的简单引入方式,省去了繁琐的引入图片的样式编写,大大提升效率. 在Vu…

上一记介绍了webpack的安装和基本配置,本记将描述webpack自身的配置 一:指定webpack入口以及出口目录以及输出文件 相信读者在看完上一记后会有一点疑惑:为什么运行webpack要配置src,为什么会有构建打包文件时会生成dist目录且里面会有一个main.js呢? -mydemo ______dist ------__main.js ______src ------__index.js ------__common.js ------__esmodule.js --index.h…