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

 

posted @ 2020-04-09 20:01  风吹De麦浪  阅读(343)  评论(0编辑  收藏  举报