前端工程化时代

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官方文档

前端工程化时代_第1张图片
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. 配置自动打包

前端工程化时代_第2张图片

3.配置首页预览页面

前端工程化时代_第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加载器才可以正常打包,否则会报错!
前端工程化时代_第4张图片

5.1 打包处理css文件

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

5.2 打包less相关文件前端工程化时代_第6张图片

5.3 打包scss相关文件

前端工程化时代_第7张图片

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

前端工程化时代_第8张图片

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

前端工程化时代_第9张图片

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

前端工程化时代_第10张图片

5.7配置vue-loader

前端工程化时代_第11张图片

6.webpack打包发布

前端工程化时代_第12张图片

你可能感兴趣的:(webpack,javascript,vue.js)