webpack4.x 从零开始配置vue 项目(三)

2021年11月26日 阅读数:1
这篇文章主要向大家介绍webpack4.x 从零开始配置vue 项目(三),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

目标

  • babel 转换ES6 语法
  • postCss 加强css功能,如自动增长前缀
  • vue-loader 解析vue 文件
  • 实现基本的vue项目开发环境,打包等

Babel

因为浏览器对es6语法兼容性问题,咱们须要用babel 对新语法以及新的api 作代码转换成,也能够理解成Babel是一个工具链,主要帮咱们作以下事情css

  • 转换语法
  • Polyfill实现目标环境中通用的功能(经过@ babel / polyfill
  • 源代码转换(codemods)

安装核心插件

npm install --save-dev @babel/core @babel/cli @babel/preset-env

@babel/core:@babel/core是babel的核心存在,babel的核心API都存在这个模块里面,好比:transformvue

@babel/cli: babel 的命令工具webpack

@babel/preset-env是一个智能预设,容许你使用最新的js,其实就是预设了一组插件了git

babel只是转换es6新语法,不会转换新的API,如:Set,Map,Promise等,那么就要使用到@babel/polyfill 和 @babel/plugin-transfrom-runtime两个东西,因为@babel/polyfill是每个文件都打补丁,是全局范围,因此用@babel/plugin-transfrom-runtime 能够防止@babel/polyfill全局污染。es6

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),再交由插件来进行处理。主要作了两件事情github

  • 把 CSS 解析成 JavaScript 能够操做的 AST 抽象语法树结构
  • 调用插件 处理 AST,获得结果

安装postCss-loader 

npm install postcss-loader --save-dev

接着安装须要用的插件便可,postCss-loader 在加载这个配置文件的时候自动会调用里面的插件来处理,插件列表地址:https://github.com/postcss/postcss/blob/master/docs/plugins.mdweb

配置vue相关文件

安装vue-loader vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

调整结构

开发环境跟生产环境有部分配置相同,因此抽离成一个文件 webpack.base.config.js npm

 

效果

 

 

 

 完结

原本应该在2019年完结的,无奈不少缘由一直耽搁着。经过从零配置vue项目,能够对webpack 更加了解。细心观察打包生成的文件,其实去掉注释咱们就会发现其实就是一个IIFE 函数,key 做为属性,function 做为值(一个模块)传进去api

 

源码

https://github.com/ben-Run/webpack-learn浏览器