前端工程化时代

1. 前言

在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD、CMD、CommonJS 等模块化规范。
但是,这些社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如:
● AMD和CMD适用于浏览器端的Javascript模块化
● CommonJS适用于服务器端的Javascript模块化
因此，ES6语法规范中，在语言层面上定义了ES6模块化规范,是浏览器端与服务器端通用的模块化开发规范。
ES6模块化规范中定义:
● 每个js文件都是一个独立的模块
● 导入模块成员使用import 关键字
● 暴露模块成员使用export 关键字

2. ES6模块化

2.1 默认导出与默认导入

● 默认导出语法export default 默认导出的成员
● 默认导入语法import接收名称from模块标识符’ 导入的名称可以自定义

2.2 需导出与按需导入

● 按需导出语法export let s1 = 10
● 按需导入语法import { s1 } from ‘模块标识符’

webpack

webpack官方文档

webpack是一个流行的前端项目构建工具 (打包工具) , 可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

1. 定义打包出去口

const path = require('path');
module.exports = {
  entry: './src/index.js',//定义打包的入口文件
  output: {
      path: path.resolve(__dirname, 'dist'),//定义打包的出口文件
    filename: 'bundle.js'
  }
};

补充:

1. join是把各个path片段连接在一起， resolve把‘／’当成根目录
2. join直接拼接字段，resolve解析路径并返回

2. 配置自动打包

3.配置首页预览页面

4. 自动打包相关参数

打包完成后自动打开浏览器页面

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },

5. loader加载器的配置

在实际开发过程中，webpack默认只能打包处理以. js后缀名结尾的模块，其他非.js 后缀名结
尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错!

5.1 打包处理css文件

1. 运行npm i style-loader css-loader -D 暗转处理css文件的loader
2. 在webpack.config.js中module->rules数组中添加loader规则
   
   注意:
   use数组中的loader顺序是固定的
   多个loader的调用顺序是从后往前调用

5.2 打包less相关文件

5.3 打包scss相关文件

5.4配置postCSS自动添加css的兼容前缀

5.5 打包样式的中图片和字体文件

5.6 打包处理js中的高级语法

5.7配置vue-loader

6.webpack打包发布