正文

webpack4.x 从零开始配置vue 项目（三）

IP云
IP云V管理员/3 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

目标
  • 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

相关阅读

目录[+]