这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战

目前前端已经全面进入模块化和工程化的阶段,不仅有我们炒常用webpack项目构建工具,尤大又推出了更快的vite(下文讲解),本文主要对模块化和工程化以及webpack做以归纳总结

模块化

在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD、CMD、CommonJS 等模块化规范。
但是,这些社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如:
● AMD和CMD适用于浏览器端的Javascript模块化
● CommonJS适用于服务器端的Javascript模块化
因此，ES6语法规范中，在语言层面上定义了ES6模块化规范,是浏览器端与服务器端通用的模块化开发规范。
ES6模块化规范中定义:
● 每个js文件都是一个独立的模块
● 导入模块成员使用import 关键字
● 暴露模块成员使用export 关键字

1 默认导出与默认导入

● 默认导出语法export default 默认导出的成员
● 默认导入语法import接收名称from模块标识符’ 导入的名称可以自定义

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'
  }
};

补充:

join是把各个path片段连接在一起， resolve把‘／’当成根目录
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文件

运行npm i style-loader css-loader -D 暗转处理css文件的loader
在webpack.config.js中module->rules数组中添加loader规则 :

//所有第三方文件的匹配规则
module:{
    rules: [
        { test:/\.css$/, use: [ 'style-loader', 'css-loader' ]  }
    ]
}

注意:
use数组中的loader顺序是固定的
多个loader的调用顺序是从后往前调用

5.2 打包less相关文件

运行 npm i less-loader less -D 命令
在webpack.config.js 的 module -> rules数组汇总,添加laoder规则:

//所有第三方文件的匹配规则
module:{
    rules: [
        { test:/\.less$/, use: [ 'style-loader',  'css-loader' , 'less-loader' ] }
    ]
}

5.3 打包scss相关文件

运行 npm i sass-loader sass -D 命令
在webpack.config.js 的 module -> rules数组汇总,添加laoder规则:

//所有第三方文件的匹配规则
module:{
    rules: [
        { test:/\.sass$/, use: [ 'style-loader',  'css-loader' , 'sass-loader' ] }
    ]
}

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

运行 npm i postcss-loader autoprefixer -D 命令
在项目根目录中创建postcss的配置文件 postcss.config.js,并初始化如下配置:

//所有第三方文件的匹配规则
const autoperfixer = requier('autoperfixer') //导入自动添加前缀的插件
module:{
   polugins:[autoperfixer] // 挂载插件
}

在webpack.config.js 的 module -> rules数组汇总,添加laoder规则:

//所有第三方文件的匹配规则
module:{
    rules: [
        { test:/\.sass$/, use: [ 'style-loader',  'css-loader' , 'postcss-loader' ] }
    ]
}

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

运行 npm i url-loader file-loader -D 命令
在webpack.config.js 的 module -> rules数组汇总,添加laoder规则:


//所有第三方文件的匹配规则
module:{
    rules: [
        { 
            test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff$/, 
            use: 'url-loader?limit=16940' 
        }

其中?之后的是loader的参数项 limit 用来指定图片的大小,单位是字节(byte),只有小于limit大小的图片,才会被装维base64图片

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

安装babel转换器相关的包:npm i babel-loader @bable/core @babel/runtime -D
在装babel语法插件相关的包:npm i @bable/procet-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在项目根目录中,创建babel配置文件babel.config.js并初始化基本配置如下

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [@babel/plugin-transform-runtime',' @babel/plugin-proposal-class-properties']
    }

在webpack.config.js的module->rules数组中,添加loader规则:

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

5.7配置vue-loader

运行npm i vue-laoder vue-template-compiler -D
在项目根目录中,创建babel配置文件babel.config.js并初始化基本配置如下

const VueLoaderPlugin = requier('vue-laoder/lib/plugin')
module:{
    rules: [
        ...//其他规则
        { test: /\.vue$/, laoder: 'vue-laoder' }
    ],
    
 }
plugins: [
          ... //其他
          new VueLoaderPlugin() //确保引入这个插件
]

6.webpack打包发布

上线之前需要通过webpack将应用进行整体打包,可以通过package.json 文件配置打包命令

在package.json文件中配置webpack打包命令,该命令默认加载项目目录中的webpack.config.js配置文件

 
     "script ": {
         // 用于打包的命令
         "build": "webpack -p",
         // 用于开发调试的命令
         "dev": "webpack-dev-server --open --host 127.0.0.1 --post 3000",
     }

前端工程化-webpack归纳与总结

模块化