前端工程化时代

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打包发布

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值