目标

  • 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. dom节点及对节点的常用操作方法

    dom节点及对节点的常用操作方法 在说dom节点前,先来看看页面的呈现: dom渲染流程:  1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元 ...

  2. 关于java性能优化细节方面的建议

    在Javva程序中,性能问题的大部分原因并不在于Java语言,而是程序本身,养成一个良好的编码习惯非常重要,能够显著地提升程序性能.下面来聊聊该方面的建议: 1.尽量在合适的场合使用单例: 所谓单例, ...

  3. LVM简介及CentOS7 LVM操作实战

    LVM简介LVM是逻辑盘卷管理(LogicalVolumeManager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和 分区之上的一个逻辑层,来提高磁盘分区管理的灵活 ...

  4. 2020Ubuntu server1804最新安装后的配置

    一.Putty进行ssh连接. 完成最基本配置之后,就远程连接服务器了.在windows是我习惯putty 在我以前的老电脑里面找一个putty是0.6版本的,连上Ip ,还是原来的配方,还是原来的味 ...

  5. Linux apache开启虚拟主机伪静态.htaccess

    打开apache配置文件 /etc/httpd/conf/httpd.conf 查找“#LoadModule rewrite_module modules/mod_rewrite.so” 去掉前面的# ...

  6. DIY 作品 及 维修 不定时更新

    手机电池DIY充电宝 2块,优质手机电池加一个升压ic ,焊上一个 usb 母头.比买的强多了. 还能调压,最高调到24V 可以带白光焊台. 更换手机 SIM/SD 卡二合一 贴上高温胶带,吹下来. ...

  7. 1..Net平台的背景

    一:.Net平台的背景 1. 2010之前 的PC时代的时候,互联网规模还不是特别庞大,以静态编译式语言为代表的JAVA和.Net没什么太大区别,.net以windows自居. 2. 2010年以JA ...

  8. mysql事务原理及MVCC

    mysql事务原理及MVCC 事务是数据库最为重要的机制之一,凡是使用过数据库的人,都了解数据库的事务机制,也对ACID四个 基本特性如数家珍.但是聊起事务或者ACID的底层实现原理,往往言之不详,不 ...

  9. 我的第一个html静态网页

    <!doctype html> <html>     <head>         <title>王兆国的个人博客</title>      ...

  10. 安装SQL Server 2008R2 报错“此计算机上安装了 Microsoft Visual Studio 2008 的早期版本”解决方法

    安装SQL Server 2008 R2报错“此计算机上安装了 Microsoft Visual Studio 2008 的早期版本,请在安装 SQL Server 2008 前将 VS2008 升级 ...