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