目标

  • 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 项目(三)的更多相关文章

  1. webpack4.x 从零开始配置vue 项目(一)基础搭建项目

    序 现在依旧记得第一次看到webpack3.x 版本配置时候的状态  刚开始看到这些真的是一脸懵.希望这篇文章能帮到刚开始入门的同学. webpack 是什么? webpack是一个模块化打包工具,w ...

  2. webpack4.x 从零开始配置vue 项目(二)基础搭建loader 配置 css、scss

    序 上一篇已经把基本架子搭起来了,现在来增加css.scss.自动生成html.css 提取等方面的打包.webpack 默认只能处理js模块,所以其他文件类型需要做下转换,而loader 恰恰是做这 ...

  3. Mac下安装和配置Vue项目

    题记:学vue有一段时间了,终于今天下定决心每日书写一篇学习笔记.1.访问node.js官网:https://nodejs.org/en/ 下载对应安装包.2.安装完成,在终端输入 : node -v ...

  4. 转载 配置vue项目

    Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本 ...

  5. babel 7.x 和 webpack 4.x 配置vue项目

    很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了. ...

  6. 如何利用webpack4.0搭建一个vue项目

    作为一个初学者,记录自己踩过的坑是个好的习惯.我本身比较懒,这里刚好有时间把自己的搭建过程记录一下这里是参考文章   https://www.jianshu.com/p/1fc5b5151abf文章里 ...

  7. 从零开始搭建VUE项目

    前言: 此样板面向大型,严肃的项目,并假定您对Webpack和vue-loader有些熟悉. 请务必阅读vue-loader的常见工作流配方的文档. 如果您只想尝试vue-loader或者鞭打一个快速 ...

  8. 自己配置 vue 项目 知识体系(自己写脚手架 类似 vue-cli )

    简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件,官方推荐命名法 |-package.json 工程文件(项目依赖.名称.配置) npm ini ...

  9. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

随机推荐

  1. ARC中__bridge, __bridge__transfer, __bridge_retained 关系

    总结于 IOS Tuturial 中 ARC两章,详细在dropbox pdf 文档. Toll-Free Bridging 当你在 Objective-C 和 Core Foundation 对象之 ...

  2. Ajax上传数据和上传文件(三种方式)

    Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) <!DOCTYPE html> <html la ...

  3. spark打包详解

    spark打包还是比较复杂的,特别的其中有关R语言的模块.在本章,我就将其中遇到的所有问题为大家一一讲解,为大家提供一点经验. 这里的打包命令是直接从官网中找的,这里我们最后得到的是tgz格式的包.打 ...

  4. Linux定制化RPM包

    定制化RPM包 1.Linux安装软件方法 1- rpm/yum安装 简单.速度快,但是不能定制安装 RPM RedHat Package Manager(RPM软件包管理器) 2- 二进制安装 解压 ...

  5. Java集合04——fail-fast&fail-safe 详解

    在前几个回合中,我们已经详细了解过了 Java 集合中的List.Set 和 Map,对这部分内容感兴趣的朋友可以关注我的公众号「Java面典」了解.今天我们将为各位介绍集合的失败机制--fail-f ...

  6. javascript的垃圾回收机制与内存管理

    一.垃圾回收机制—GC Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存. 原理:垃圾收集器会定期(周期性 ...

  7. [BUG]微信浏览器 iOS input 失焦页面不回弹

    描述 ios13. ios中,input唤醒软键盘后,body整体会向上滚动,如果input框输入完成确定后,如果页面在最底部则不回弹,导致fixed布局实际效果上移,fixed布局内按钮点不到. 如 ...

  8. SpringCloud微服务:Sentinel哨兵组件,管理服务限流和降级

    源码地址:GitHub·点这里||GitEE·点这里 一.基本简介 1.概念描述 Sentinel 以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性.包括核心的独立类库,监 ...

  9. React && ReactDOM

    如果你是 React 的初学者,一定会对 React 和 ReactDOM 感到迷惑.为什么要分成两个包呢?害得我还要引入两次,说好的减轻开发人员负担呢,这丫的在搞什么飞机.带着这个疑问,我们一起来康 ...

  10. python多重继承的属性和方法调用顺序问题和对迭代器的初步理解

    推荐阅读:https://www.cnblogs.com/bigb/p/11650707.html 计算机学习的一个好办法就是自己将代码跑一遍,了解代码的运作顺序和原理(主要弄懂 函数作用,传入参数, ...