前端工程化

前端开发遵循：

  1. 模块化（js的模块化、css的模块化、其他资源的模块化）
  2. 组件化（复用现有的UI结构、样式、行为）
  3. 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
  4. 自动化（自动化构建、自动部署、自动化测试）

webpack的使用

安装webpack@5.5.1

npm install webpack@5.5.1

安装cli工具

npm install webpack-cli@4.2.0

配置webpack

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

module.export={
    mode:'development',
    //mode用来指定构建模式，可选值有development和production
}

在package.json的scripts节点下，新增dev脚本如下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },

在终端使用对项目进行打包

npm run dev

在html中引用打包好的dist目录下的main.js就不会出现兼容性问题

自定义打包的出口和入口

通过entry节点指定打包的入口。通过output节点指定打包的出口。

const path=require('path')
module.export={
    mode:'development',
    //mode用来指定构建模式，可选值有development和production
    entry:path.join(__dirname,'./src/index.js')//打包入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),//输出文件的存放路径
        filename:'bundle.js'//输出文件的名称
    }
}

webpack中的插件

  1. webpack-dev-server相当于node.js中的nodemon工具，每当修改了源代码，webpack会自动进行项目的打包和构建
  2. html-webpack-plugin类似于一个模板引擎插件，可以通过此插件自定制index.html页面的内容

下载webpack-dev-server

npm i webpack-dev-server@3.11.0 -D

在package.json中配置

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack serve"
},

npm run dev 即可开启实时打包的功能

在webpack.config.js中配置

不配置webpack-dev-server的情况下。webpack打包生成的文件，会放到实际的物理磁盘上
配置了webpack-dev-server之后，打包生成的文件存放到了内存中

生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的，不可见的。

可直接在根目录下访问输出的文件名。

下载html-webpack-plugin

npm i html-webpack-plugin@4.5.0 -D

在webpack.config.js配置文件中配置

const path=require('path')

//导入HTML插件，得到一个构造函数
const HtmlPlugin=require('html-webpack-plugin');

//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',
    filename:'./index.html'
})
module.export={
    mode:'development',
    //mode用来指定构建模式，可选值有development和production
    entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),//输出文件的存放路径
        filename:'bundle.js'//输出文件的名称
    },
    plugins:[htmlPlugin],
}

注意：使用html插件复制项目根目录中的index.html页面时，也被存放到了内存中。html插件在生成index.html页面的底部，自动注入了打包的bundle.js文件

loader

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块~默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。

loader加载器的作用：协助webpack打包处理特定的文件模块，如：

css-loader处理.css相关文件

less-loader处理.less相关文件

babel-loader处理webpack无法处理的高级JS语法

安装处理css的loader

下载npm i style-loader@2.0.0 css-loader@5.0.1 -D

在webpack.config.js中添加

module:{//所有第三方文件模块的匹配规则
    rules:[//文件后缀匹配
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}
处理样式表中与url路径相关的文件

下载npm i url-loader@4.1.1 file-loader@6.2.0 -D

module:{//所有第三方文件模块的匹配规则
    rules:[//文件后缀匹配
        {test:/\.jpg|png|gif$/,use:['url-loader?limit=22229']}
    ]
}
处理JS高级语法

下载npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D

配置

module:{//所有第三方文件模块的匹配规则
    rules:[//文件后缀匹配
        {
            test:/\.js$/,
            exclude:/node_modules/,
         	use:{
                loader:'babel-loader',
                options:{
                    plugins:['@babel/plugin-proposal-class-properties']
                }
            }
        }
    ]
}

打包发布

配置build命令

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack",
  "build": "webpack --mode production"
},