前端模块化

模块化概述

基础

  • 模块化就是把单独的一个功能封装到一个模块中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块
  • 好处:方便代码的重用,从而提升开发效率,方便后期维护

服务器端CommonJS模块化规范

  • 模块分为单文件模块和包
  • 模块成导出使用:module.exports和exports
  • 模块成员导入使用:require(‘模块标识符’)

ES6模块化规范

  1. 每个JS文件都是一个独立的模块
  2. 导入模块成员使用import关键字
  3. 暴露模块成员使用export关键字

webpack

基础使用

  1. 运行npm install webpack webpack-cli -D安装

  2. 在项目根目录,创建名webpack.config.js的配置文件

  3. webpack的配置文件,初始化配置development和production

    • development不会压缩js文件
    • production会进行压缩
    1
    2
    3
    module.exports = {
    mode: 'development' // mode用来指定构建模式
    }
  4. package.json的配置文件中的scripts节点下,新增dev脚本

    1
    2
    3
    "scripts":{
    "dev":"webpack" // script下的脚本可以使用npm run执行
    }
  5. 在终端运行npm run dev命令执行,启动webpack进行项目打包

配置打包的入口和出口

  • 打包的默认入口文件src/index.js

  • 打包的默认出口文件dist/main.js

  • 修改再webpack.config.js中配置

    1
    2
    3
    4
    5
    6
    7
    8
    const path = require('path') // 导入 node.js 中专门操作路径的模块
    module.exports = {
    entry:path.join(__dirname,'./src/index.js'), // 打包的入口文件路径
    output:{
    path:path.join(__dirname,'./dist'), // 输出文件的存放路径
    filename:'bundle.js' // 输出文件的名字
    }
    }

配置自动打包

  1. 运行npm i webpack-dev-server -D命令,安装自动打包工具

  2. 修改package.json->scripts中的dev

    1
    2
    3
    "scripts":{
    "dev":"webpack-dev-server" // script下的脚本可以使用npm run执行
    }
  3. src/index.html中script脚本引入路径修改为/bundle.js

  4. 运行npm run dev命令

  5. 在浏览器访问http://localhost:8080

  • webpack-dev-server会启动一个实时打包的http服务器
  • webpack-dev-server打包生成的输出文件,默认放在了项目根目录而且是虚拟的

配置html-webpack-plugin

  1. 运行npm i html-webpack-plugin -D安装

  2. 修改webpack.config.js文件

    1
    2
    3
    4
    5
    6
    7
    // 导入生成预览页面的插件,得到一个构造函数
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const htmlPlugin = new HtmlWebpackPlugin({
    // 创建插件的实例对象
    template:'./src/index.html', // 指定要创建的模板
    filename:'index.html' // 指定生成文件的名字,文件是虚拟的
    })
  3. 修改webpack.config.js文件中向外暴露的配置对象,新增配置节点

    1
    2
    3
    module.exports = {
    plugins:[ htmlPlugin ] // plugins数组是webpack打包期间会用到的一些插件列表
    }

打包参数配置

  • package.json中配置
    1. –open:打包完成后自动打开浏览器
    2. –host:配置ip地址
    3. –port:配置端口
1
2
3
"scripts": {
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

webpack加载器

  • webpack默认只能打包以js结尾的文件,打包其他文件需要调用loader加载器
  1. 打包css文件

    • 运行npm i style-loader css-loader -D安装

    • 配置webpack.config.jsmodule->rules数组中

      1
      2
      3
      4
      5
      6
      7
      8
      module.exports = {
      module:{
      rules:[
      // test表示匹配的文件类型,use表示对应要调用的loader
      {test:/\.css$/,use:['style-loader','css-loader']}
      ]
      }
      }
    • 注意:

      1. use数组中指定的loader顺序是固定的
      2. 多个loader的调用顺序是从后往前调用
  2. 打包**.less**文件

    • 运行npm i less-loader less -D安装

    • 配置webpack.config.jsmodule->rules数组中

      1
      2
      3
      4
      5
      6
      7
      8
      module.exports = {
      module:{
      rules:[
      // test表示匹配的文件类型,use表示对应要调用的loader
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
      ]
      }
      }
  3. 打包scss文件

    • 运行npm i sass-loader node-sass -D安装

    • 配置webpack.config.jsmodule->rules数组中

      1
      2
      3
      4
      5
      6
      7
      8
      module.exports = {
      module:{
      rules:[
      // test表示匹配的文件类型,use表示对应要调用的loader
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
      ]
      }
      }
  4. 配置postCSS自动添加css兼容前缀

    • 运行npm i postcss-loader autoprefixer -D安装

    • 在项目根目录创建postcss配置文件postcss.config.js,初始化配置

      1
      2
      3
      4
      const autoprefixer = require('autoprefixer'); // 导入插件
      module.exports = {
      plugins:[autoprefixer] // 挂载插件
      }
    • webpack.config.js的module->rules数组中,修改css的loader

      1
      2
      3
      4
      5
      6
      7
      8
      module.exports = {
      module:{
      rules:[
      // test表示匹配的文件类型,use表示对应要调用的loader
      {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
      ]
      }
      }
  5. 打包图片和字体文件

    • 运行npm i url-loader file-loader -D安装

    • 配置webpack.config.jsmodule->rules数组中

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      module.exports = {
      module:{
      rules:[
      // test表示匹配的文件类型,use表示对应要调用的loader
      {
      test:/\.jpg|png|gif|bmp|ttf|eop|svg|woff|woff2$/,
      // ?之后是loader的参数
      // limit用来指定图片的大小,单位是字节
      // 图片如果小于16940会被转为base64,不然不会被转
      use:'url-loader?limit=16940'
      }
      ]
      }
      }
  6. 打包处理js文件的高级语法

    • 安装babel转换器包npm i babel-loader @babel/core @babel/runtime -D

    • 安装babel语法插件相关的包npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

    • 在项目根目录创建babel配置文件babel.config.js初始化配置

      1
      2
      3
      4
      module.exports = {
      presets:['@babel/preset-env'],
      plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
      }
    • webpack.config.js文件module->rules配置

      1
      2
      // exclude为排除项,表示babel-loader不需要处理node_modules中的js文件
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
  7. 打包vue组件

    • 运行npm i vue-loader vue-template-compiler -D安装

    • webpack.config.js文件添加vue-loader配置

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      const VueLoaderPlugin = require('vue-loader/lib/plugin')
      module.exports = {
      module:{
      rules:[
      {test:/\.vue$/,use:'vue-loader'}
      ]
      },
      plugins:[
      new VueLoaderPlugin() // 引入插件
      ]
      }

打包和发布

  • 配置package.json
1
2
3
4
5
"scripts":{
"build":"webpack -p",
// 用于开发调试的命令
"dev":"webpack-dev-server"
}

相关文章

JavaScript基础

JavaScript高级

Jquery基础

Jquery高级

Bootstrap

Ajax和Json

DataTables

Sweetalert2

zTree使用

微信小程序