前端工程化

前端工程化

前端工程化的概念

指将前端开发的流程规范化、标准化，包括开发流程，技术选型、代码规范、构建发布等，用于提升前端工程师的开发效率和代码质量

webpack

入口

module.exports = {
 entry: ''
}
​
//告诉webpack应该从哪里开始阅读我的文件，从哪里开始压缩，从哪里开始打包，然后决定应该怎么进行自己的功能。可以很好的理解啊，因为一个程序总要有一个入口吧，你需要告诉webpack

输出

module.exports = {
    entry: '',
    output: {
        path:   ,
        filename: ''
    }
}
输出就相当于webpack给你开出的处方，是webpack给你出来的结果，你需要用指定一个出口，指定他的路径，指定他的名称

Loader

载荷
webpack可以组装我们需要的功能
如果我们想丰富webpack的功能，我们就需要loader
loader提供给webpack更加丰富的功能

插件

插件赋予webpack无限扩展的功能
那么loader和插件的区别是什么
loader处理webpack不能处理的文件，因为webpack本身是js所以只能理解js，loader就赋予webpack处理其他文件的功能
插件比loader的功能更加丰富

模式兼容性

模式有开发模式和生产模式，兼容性也是通过扩展实现的

webpack的安装和使用

很奇怪，使用yarn安装了两次说网络连接有问题，再安装了一次又好了

之后呢，又显示webpack-dev-server没有安装

又安装了

它说还没有安装

于是去DOS上使用webpack --version看了看，显示安装

不知道是怎么回事

下面说说webpack的安装和使用

初始化项目,快速创建nodejs项目
npm init -y
两种webpack的安装方式
npm install -g/-D webpack webpack-cli -g是全局安装-D是安装在开发环境中
三种使用方式
npx webpack
./node_modules/.bin/webpack
npm run

入口和输出

在我们初始化好了npm项目之后，我们在根目录新建一个src文件下下index.js作为入口文件，再新建一个webpack.config.js文件作为webpack的配置文件。之后在配置文件中进行配置。

首先引入Path,这是node中的一个模块，然后将其引入进来，使用其join方法进行拼接

因为output这里需要使用绝对地址

output需要同时指定filename和path

__dirname是文件的根目录，这是一个全局变量，用来拼接地址用的，后面的dist指定输出的路径

loader

这次演示了sass-loader

首先需要引入解析的loader

css-loader style-loader sass-loader node-sass
使用yarn add xxx xxx xxx xxx -D安装

然后就是配置规则

在module中配置，module中添加rules数组

rules中的每一个对象添加test和use，注意use中的解析顺序是从后往前解析，test中存放的是正则表达式，用来校验文件后缀用的

sass和scss

scss是sass的升级版本，完全兼容sass的功能，又有了些新增能力，语法形式上又些许不同，最主要的是sass靠缩进表示嵌套关系，scss是靠花括号表示嵌套关系，其实是一个东西啊，这是一个是升级版，一个是原版

HtmlWebpackPlugin和热模块更新

首先呢HtmlWebpackPlugin是用来自动帮我们在dist目录下生成index.html的，它会自动引入我们设置的bundle.js

使用方式

首先用yarn引入

yarn add html-webpack-plugin -D

然后在webpack.config.js中引入

const HtmlWebpackPlugin = require('html-webpack-plugin')

然后在下面的配置项中plugins中添加

上面一个是生成的文件名，一个是模板，模板我们可以自己指定，filename是相对于dist目录的，template是相对于根目录的。之后我们就完成了配置

热模块更新

我们这里利用webpack-dev-server

首先安装webpack-dev-server，这里就不再演示了

然后我们在配置文件中引入webpack

然后再在plugins中引入

之后呢，添加

开启devserver服务

然后

在package.json中添加hot命令，启用webpack-dev-pack服务，然后启用

我们可能会遇见问题

提示没有mode选项

这个时候我们在webpack.config.js中添加

大功告成，关于中间更加细节的东西，一起努力去了解