目标

  • 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. iOS 17个常用代码整理

    .判断邮箱格式是否正确的代码: //利用正则表达式验证 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex = @" ...

  2. Python学习笔记.基础一

    Python 语言:解释型.交互式.面向对象.   Python源代码遵循GPL协议   Python标识符 在python里,标识符有字母.数字.下划线组成. 在python中,所有标识符可以包括英 ...

  3. Git的使用流程及常用命令汇总

    Git是一个很好用的版本控制系统,本文对于常用的一些命令进行了汇总. 创建一个存储仓库(repository) https://github.com/右上角点击"+"号,New r ...

  4. 《ASP.NET Core 3框架揭秘》博文汇总

    在过去一段时间内,写了一系列关于ASP.NET Core 3相关的文章,其中绝大部分来源于即将出版的<ASP.NET Core 3框架揭秘>(博文只能算是"初稿",与书 ...

  5. php里面的一些面试经典的函数

    <?php /* 这是一个多线程的读取解决的函数 @param1 $fle 传入要读取的文件名 */ function filelock($fle){ $fp=fopen($fls,'w+'); ...

  6. Yaml文件,超详细讲解

    YAML文件简单介绍 YAML 是一种可读性非常高,与程序语言数据结构非常接近.同时具备丰富的表达能力和可扩展性,并且易于使用的数据标记语言. YAML全称其实是"YAML Ain't a ...

  7. ajax 瀑布流 demo

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js 实现弹性运动的简单应用----导航栏中弹性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. dos下 批处理 用 pause 可以在最后暂停 查看结果信息 build.bat

    dos下 批处理 用 pause 可以在最后暂停 查看结果信息

  10. ajax js分页算法分析

    显示效果:[页面总数小于等于10,全部显示,当前页特殊显示]上一页  1   2   3   4   5   6   7   8   9   10   下一页 [页面总数大于10,部分显示,当前页特殊 ...