前端工程化与webpack简单使用(1)

最新推荐文章于 2023-03-03 11:59:21 发布

原创最新推荐文章于 2023-03-03 11:59:21 发布 · 903 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack #javascript

Webpack 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了前端工程化的重要性，重点关注了Webpack的基本使用，包括模块化、压缩和默认约定，以及关键插件如webpack-dev-server和html-webpack-plugin的实际操作。通过实例演示，学习者将掌握如何配置和利用Webpack提升项目开发效率。

1.前端工程化

1.1实际的前端开发

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

1.2什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具，技术，流程，经验等进行规范化，标准化。

1.3前端工程化的解决方案

早期

grunt
gulp

目前主流

webpack
parcel

2.`webpack`的基本使用

2.1什么是 webpack

概念：webpack 是前端工程化的具体解决方案

主要功能：提供友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端Javascript 的兼容性，性能优化等强大的功能.

2.2隔行变色案例

初始化项目
```
npm init -y
```
创建src 源代码目录
新建 index.html和index.js
安装jquery
- -S的含义与--save相同将版本放在package.json文件的dependencies中
- dependencies:开发和上线过程都要用到
```
npm i jquery -S 
```
通过 es6 语法导入jQuery，实现列表隔行变色效果

2.3安装`webpack`

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

-D是--save-dev的简写，将版本号记录到package.json文件的devDependencies下
devDependencies:只在开发阶段会被用到
--save 或者 --save-dev 可以根据查官方文档来确定

2.4配置`webpack`

2.4.1基本配置

在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化配置：

module.exports = {
    mode: 'development'
//mode 用来指定构建模式 
//development 开发阶段  production 发布使用阶段   
}

在 package.json 的 script 节点下 新增 dev 脚本:

script 节点下的脚本可以通过 npm run xxx 来运行
```
"scripts": {
    "dev": "webpack"
}
```
在终端运行npm run dev，启动webpack进行项目的打包构建

会在在根目录下生成一个dist目录，目录下有main.js 解决了兼容性问题

2.4.2压缩

将 development 改成 production 再重新 npm run dev
可将 main.js 压缩
development 打包时间段体积大适合开发阶段
production 打包时间长体积小适合上线阶段
在 run 的时候会读取webpack配置文件，根据配置文件再去运行

2.4.3`webpack`中的默认约定

在webpack 4.x和 5.x 的版本中，有如下的默认约定：

默认的打包入口文件为 src -> index,js
默认的输出文件路径为 dist -> main.js

可以在 webpack.config.js 中修改打包的默认约定

2.4.4自定义打包的入口出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output节点 指定打包的出口：

const path = require('path')

module.exports = {
    mode: 'production',
    // entry 处理的文件路径
    entry: path.join(__dirname , './src/index.js'),
    output: {
        // 导出的文件目录
        path: path.join(__dirname , './dist'),
        //导出的文件名
        filename: 'index.js'
    }
}

3.`webpack`中的插件

3.1 `webpack-dev-server`

3.1.1简介

官方使用介绍： https://www.npmjs.com/package/webpack-dev-server
类似于 node.js 用到的 nodemon 工具
每当修改源代码，webpack 会自动进行项目的打包和构建

3.1.2安装

npm install webpack-dev-server@3.11.2 -D

3.1.3配置

修改 package.json -> script 中的 dev 命令：

注意后面是serve哦，不是server
```
"scripts": {
    "dev": "webpack serve"
  }
```
再次运行 npm run dev 命令，重新进行项目的打包

但是！！！如果你和我一样，发现运行后报下面的错:

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function

那就运行一下下面的命令就 ok ~
```
npm install webpack-cli --save-dev
```
之后再运行 npm run dev 就可以了
在浏览器访问 http://locslhost:8080 地址，查看自动打包效果
将引用文件路径改为/xxx
通过浏览器访问 http://127.0.0.1:8080/src/ 来查看样式的改变

访问 src 文件夹默认展示其中的 index.html 文件

webpack-dev-server 会启动一个实时打包的 http 服务器，每次修改代码或者保存代码都会被这个插件监听到，插件会将最新的导出文件放在根目录下，储存在内存中，但是看不见，可以在浏览器中通过8080端口的/xxx来访问。

3.2 `html-webpack-plugin`

3.2.1简介

Plugin that simplifies creation of HTML files to serve your bundles

这个插件简化了HTML文件的创建，以服务于你的bundle

官方使用介绍：https://www.npmjs.com/package/html-webpack-plugin

3.2.2安装

  npm i --save-dev html-webpack-plugin

3.2.3配置

修改 webpack.config.js 文件：

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',   //指定原文件的存放路径
    filename: './index.html'        // 指定生成文件的存放路径
})

module.exports = {
    mode: 'development',
    // entry 处理的文件路径
    entry: path.join(__dirname , './src/index.js'),
    output: {
        path: path.join(__dirname , './dist'),
        filename: 'index.js'
    },
    // 插件的数组 将来 webpack 在运行的时候 会调用这些插件
    // 通过 plugins节点 使得 htmlPlugin 插件生效
    plugins: [htmlPlugin]
}

修改了之后我们可以直接访问 http://127.0.0.1:8080 来访问最新页面，因为生成了index.html文件在项目根目录下，储存在了内存里。如果访问不到就保存一下刚刚修改的配置文件。

3.2.4特性

html-webpack-plugin 插件的神奇之处：

通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到内存中
HTML 插件在生成的 index.html 页面，自动注入了打包的 index.js 文件

3.3 devServer 节点

在 webpack.config.js 配置文件中，可以通过 devServer 节点对webpack-dev-server 插件进行更多的配置：

devServer: {
        // 首次打包成功后 自动打开浏览器
        open: true,
        // 在 http 协议后 如果端口号是 80 则可以被省略
        port: 80,
        // 指定运行的主机机制
        host: '127.0.0.1'
    }