前端工程化和 webpack

前端工程化

概念

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终，前端工程化需要落实到如下 4 个方面：
项目的构建、审查、测试、部署

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

好处

1. 前端工程化让前端开发能够“自成体系”，覆盖了前端项目从创建到部署的方方面面
2. 最大程度地提高了前端的开发效率
3. 降低了技术选型、前后端联调等带来的协调沟通成本

解决方案

早期的前端工程化解决方案：
⚫ grunt（ https://www.gruntjs.net/ ）
⚫ gulp（ https://www.gulpjs.com.cn/ ）

目前主流的前端工程化解决方案：
⚫ webpack（ https://www.webpackjs.com/ ）
⚫ parcel（ https://zh.parceljs.org/ ）

webpack

背景:

浏览器只支持html css js
以前辛辛苦苦写了一个模块 结果浏览器上不能使用
代码并不是随便你怎么写 浏览器都能识别
希望有一个工具 可以把浏览器不能识别的代码 进行打包转换
变成浏览器可识别的代码
可以通过webpack解决

作用:

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript，vue等），并将其转换和打包为合适的格式供浏览器使用

好处：

让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性

现在最流行的三个SPA(single page application)的框架，都于webpack紧密相连。

• React.js + webpack
• Vue.js + webpack
• Angular.js + webpack

目前企业级的前端项目开发中，绝大多数的项目都是基于 webpack 进行打包构建的

学习webpack

学习webpack有4个重点内容：

• 入口(entry)
• 输出(output)
• 插件(plugins)
• 加载器(loader)

webpack下载安装

需要安装 webpack 相关的两个包

1. 创建项目 生成package.json文件 npm init -y
2. 项目中下载webpack依赖 npm install webpack@5.5.2 webpack-cli@4.2.0 -D

webpack只是一个中间用于处理文件的工具,只是需要在开发的时候使用，打包部署后就不需要的，所以这个工具的包基本都是 --save-dev 方式下载

webpack基本使用

webpack 是基于node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

在终端中输入webpack 实现资源的打包转换 (全局安装了webpack情况)
或者在package.json文件中配置script脚本 (npm run 指令名 运行)

"scripts": {	"dev":"webpack --config webpack.config.js"   }

未使用webpack前

可能有的报错信息

// 使用require时的报错信息
Uncaught ReferenceError: require is not defined at app.js:1
//使用importn导入模块的错误
Cannot use import statement outside a module

浏览器运行错误的原因

1. 浏览器只识别基本的js,css,html
2. 在引入的文件中使用了node方式的代码(require),而这种代码浏览器并不能识别

webpack的配置文件

注意:
凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效

webpack.config.js文件 简介

1. webpack.config.js 是 webpack的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
2. 在项目根目录下添加一个webpack.config.js文件，注意文件名称绝对不能修改
3. 我们主要在这个文件中配置
   1. 入口(entry)
   2. 输出(ouput)
   3. 插件(plugins)
   4. 加载器(loader)

具体代码

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    //配置入口文件
    entry: './src/app.js',
    //配置输出(是个对象 {有输出目录path  输出文件名称 filename})
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'main.js'
    },

    devServer: {
        // 设置 自动打开浏览器
        open: true
    },
    // 添加插件配置   记得这个配置项 名字是 plugins (记得加s)
    plugins: [
        // 挂载插件
        new HtmlPlugin({
            template: './index.html',  //参照模板 指定要复制的文件
        }),
        new VueLoaderPlugin()
    ],
    module: {

        rules: [
            // 处理css文件 css文件加载规则
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            //处理less文件 less文件加载规则
            {
                test: /\.less$/i,
                use: [
                    {
                        loader: "style-loader",
                    },
                    {
                        loader: "css-loader",
                    },
                    {
                        loader: "less-loader",
                        options: {
                            lessOptions: {
                                strictMath: true,
                            },
                        },
                    },
                ],
            },
            // 处理图片 图片加载规则
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
            //添加vue加载规则
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ],
    },
}