webpack4.x 从零开始配置vue 项目(三)
目标
- babel 转换ES6 语法
- postCss 增强css功能,如自动增加前缀
- vue-loader 解析vue 文件
- 实现基本的vue项目开发环境,打包等
Babel
由于浏览器对es6语法兼容性问题,我们需要用babel 对新语法以及新的api 做代码转换成,也可以理解成Babel是一个工具链,主要帮我们做如下事情
- 转换语法
- Polyfill实现目标环境中通用的功能(通过@ babel / polyfill)
- 源代码转换(codemods)
安装核心插件
npm install --save-dev @babel/core @babel/cli @babel/preset-env
@babel/core:@babel/core是babel的核心存在,babel的核心API都存在这个模块里面,比如:transform
@babel/cli: babel 的命令工具
@babel/preset-env是一个智能预设,允许你使用最新的js,其实就是预设了一组插件了
babel只是转换es6新语法,不会转换新的API,如:Set,Map,Promise等,那么就要使用到@babel/polyfill 和 @babel/plugin-transfrom-runtime两个东西,由于@babel/polyfill是每一个文件都打补丁,是全局范围,所以用@babel/plugin-transfrom-runtime 可以防止@babel/polyfill全局污染。
npm install --save @babel/polyfill
npm install --save @babel/plugin-tranfrom-runtime
配置babel 文件
// babel config
const presets = [
["@babel/preset-env", {
// "useBuiltIns": "usage",
// "targets": {
// "browsers": "last 2 versions, not ie <= 9"
// }
}]
] const plugins = [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime",
// ["@babel/plugin-transform-runtime", {
// "helpers": false
// }]
] module.exports = {
presets,
plugins
}
postcss
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。主要做了两件事情
- 把 CSS 解析成 JavaScript 可以操作的 AST 抽象语法树结构;
- 调用插件 处理 AST,得到结果
安装postCss-loader
npm install postcss-loader --save-dev
接着安装需要用的插件即可,postCss-loader 在加载这个配置文件的时候自动会调用里面的插件来处理,插件列表地址:https://github.com/postcss/postcss/blob/master/docs/plugins.md
配置vue相关文件
安装vue-loader vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
调整结构
开发环境跟生产环境有部分配置相同,所以抽离成一个文件 webpack.base.config.js
效果
完结
本来应该在2019年完结的,无奈很多原因一直耽搁着。通过从零配置vue项目,可以对webpack 更加了解。细心观察打包生成的文件,其实去掉注释我们就会发现其实就是一个IIFE 函数,key 作为属性,function 作为值(一个模块)传进去
源码
https://github.com/ben-Run/webpack-learn
webpack4.x 从零开始配置vue 项目(三)的更多相关文章
- webpack4.x 从零开始配置vue 项目(一)基础搭建项目
序 现在依旧记得第一次看到webpack3.x 版本配置时候的状态 刚开始看到这些真的是一脸懵.希望这篇文章能帮到刚开始入门的同学. webpack 是什么? webpack是一个模块化打包工具,w ...
- webpack4.x 从零开始配置vue 项目(二)基础搭建loader 配置 css、scss
序 上一篇已经把基本架子搭起来了,现在来增加css.scss.自动生成html.css 提取等方面的打包.webpack 默认只能处理js模块,所以其他文件类型需要做下转换,而loader 恰恰是做这 ...
- Mac下安装和配置Vue项目
题记:学vue有一段时间了,终于今天下定决心每日书写一篇学习笔记.1.访问node.js官网:https://nodejs.org/en/ 下载对应安装包.2.安装完成,在终端输入 : node -v ...
- 转载 配置vue项目
Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本 ...
- babel 7.x 和 webpack 4.x 配置vue项目
很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了. ...
- 如何利用webpack4.0搭建一个vue项目
作为一个初学者,记录自己踩过的坑是个好的习惯.我本身比较懒,这里刚好有时间把自己的搭建过程记录一下这里是参考文章 https://www.jianshu.com/p/1fc5b5151abf文章里 ...
- 从零开始搭建VUE项目
前言: 此样板面向大型,严肃的项目,并假定您对Webpack和vue-loader有些熟悉. 请务必阅读vue-loader的常见工作流配方的文档. 如果您只想尝试vue-loader或者鞭打一个快速 ...
- 自己配置 vue 项目 知识体系(自己写脚手架 类似 vue-cli )
简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件,官方推荐命名法 |-package.json 工程文件(项目依赖.名称.配置) npm ini ...
- 配置vue项目将打包后图片文件的引用路径改为cdn路径?
vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...
随机推荐
- ARC中__bridge, __bridge__transfer, __bridge_retained 关系
总结于 IOS Tuturial 中 ARC两章,详细在dropbox pdf 文档. Toll-Free Bridging 当你在 Objective-C 和 Core Foundation 对象之 ...
- Ajax上传数据和上传文件(三种方式)
Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) <!DOCTYPE html> <html la ...
- spark打包详解
spark打包还是比较复杂的,特别的其中有关R语言的模块.在本章,我就将其中遇到的所有问题为大家一一讲解,为大家提供一点经验. 这里的打包命令是直接从官网中找的,这里我们最后得到的是tgz格式的包.打 ...
- Linux定制化RPM包
定制化RPM包 1.Linux安装软件方法 1- rpm/yum安装 简单.速度快,但是不能定制安装 RPM RedHat Package Manager(RPM软件包管理器) 2- 二进制安装 解压 ...
- Java集合04——fail-fast&fail-safe 详解
在前几个回合中,我们已经详细了解过了 Java 集合中的List.Set 和 Map,对这部分内容感兴趣的朋友可以关注我的公众号「Java面典」了解.今天我们将为各位介绍集合的失败机制--fail-f ...
- javascript的垃圾回收机制与内存管理
一.垃圾回收机制—GC Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存. 原理:垃圾收集器会定期(周期性 ...
- [BUG]微信浏览器 iOS input 失焦页面不回弹
描述 ios13. ios中,input唤醒软键盘后,body整体会向上滚动,如果input框输入完成确定后,如果页面在最底部则不回弹,导致fixed布局实际效果上移,fixed布局内按钮点不到. 如 ...
- SpringCloud微服务:Sentinel哨兵组件,管理服务限流和降级
源码地址:GitHub·点这里||GitEE·点这里 一.基本简介 1.概念描述 Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性.包括核心的独立类库,监 ...
- React && ReactDOM
如果你是 React 的初学者,一定会对 React 和 ReactDOM 感到迷惑.为什么要分成两个包呢?害得我还要引入两次,说好的减轻开发人员负担呢,这丫的在搞什么飞机.带着这个疑问,我们一起来康 ...
- python多重继承的属性和方法调用顺序问题和对迭代器的初步理解
推荐阅读:https://www.cnblogs.com/bigb/p/11650707.html 计算机学习的一个好办法就是自己将代码跑一遍,了解代码的运作顺序和原理(主要弄懂 函数作用,传入参数, ...