前端模块化

模块化概述

基础

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

服务器端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.js的module->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.js的module->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.js的module->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.js的module->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使用

Vue