web前端--ES6模块化和webpack

内容同步更新在语雀笔记里~

一、ES6模块化

模块化

  • 将一个功能封装到一个模块中,模块之间相互隔离,通过接口调用;

  • 代码复用,便于管理和后期维护。

    浏览器模块化规范

  • AMD:require.js

  • CMD: Sea.js

    服务器端模块化规范

  • CommonJS: 1、模块分为单文件模块和包 2、模块导出 module.export 和exports 3、导入require(’模块标识符’)

    ES6模块化(浏览器与服务器通用)定义规范

  • 每个js是单独的文件

  • 导入模块成员用import,暴露使用export

    node.js中使用bable实现ES6模块化

  • bable:语法转换插件 npm install –save-dev @bable/cli,polyfill等

  • 项目中创建bable.config.js文件如下,然后npx bable-node index.js,在index.js中 运行bable插件

image.png

导出

  • 默认*export default { 变量 } *可以将模块中的私有变量暴露出去

  • 按需导出 export function sum= fumction(){}

    导入

  • import 接收名 from ‘./sum.js’

  • 按需导入 import { s1 } from “./m1.js” s1需要和按需导出的相同

  • 直接导入并执行模块代码 import ‘./m1.js’ ,不暴露m1的成员,直接执行m1.js

    二、webpack

    1、webpack

  • 前端项目打包工具

  • 功能:模块化友好,代码压缩混淆、js兼容问题,性能优化等

  • ul>li{这是第$个}*9,实现9列

    2、基本使用

  • npm init -y 初始化webpack,创建package.json文件,然后创建src文件夹,index.js中包含所用的方法

    3、在项目中使用

  • npm install webpack webpack-cli -D,然后创建package.config.js

image.png

  • 在package.json中,

image.png

4、打包的入口和出口

  • 默认入口:src->index.js
  • 打包输出文件: dist->main.js
  • 修改默认出入口

image.png

5、webpack自动打包

  • npm install webpack-dev-server -D安装,修改package.json->script dev:”webpack-dev-server”,index.html中引用的script改为bundle.js 然后运行 npm run dev

    6、配置html-webpack-plugin生成预览页面

  • npm install html-webpack-plugin -D安装插件

image.png

7、package.json中的配置

  • –open 打包后自动打开网页

  • –host 配置ip –host 127.0.0.1

  • –port配置端口 –port 8888

    8、webpack加载器–loader打包非js结尾的模块

  • 打包css/less/sess文件 npm i style-loader css-loader -D安装less-loader/sess-loader

image.png

9、webpack加载器–配置postCSS自动添加css兼容前缀

  • 运行npm i postcss-loader autoprefixer -D
  • 根目录创建配置文件postcss.config.js,并在webpack.config.js中module->rules中加入postcss-loader

image.png
**

10、webpack加载器–打包图片和字体

  • npm i url-loader file-loader -D
  • 在webpack.config.js中module->rules中加入如下规则

image.png

11、webpack加载器–打包js文件中的高级语法

  • 安装babel转换器相关的包

image.png
image.png

12、webpack加载器–配置vue组件

  • npm i vue-loader vue-template-compiler -D

image.png

13、webpack使用vue

  • npm i vue -S 安装

image.png

14、webpack 打包发布vue

  • 在package.json 中配置scripts: “build”:”webpack -p”,即可通过npm run build 打包