webpack——构建前端工程化项目

Webpack

前端工程化

实际的前端的开发：

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

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

企业中Vue项目，都是基于工程化的方式进行的。

前端开发自成体系，有一套标准的开发方案和流程。

前端工程化解决方案

早期：

• Grunt

• Gulp

目前主流：

• webpack
• parcel

webpack概念

什么是webpack

webpack是前端项目工程化的具体解决方案

主要功能

它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

让程序员的中心放到具体功能的实现上，提高了前端的开发效率和可维护性。

基本使用

创建列表隔行变色项目

1. 新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json

2. 新建src源代码目录

3. 新建src->index.html和src->index.js脚本文件

4. 初始化首页基本的结构

5. 运行npm install jquery -S命令，安装jQuery

发现package.json下面也会显示

7. 通过ES6模块化的方式导入JQuery，实现列表隔行变色效果

// 使用ES6 导入语法，导入JQuery
import $ from 'jquery'

// 2. 定义JQuery的入口函数
$(function() {
    // 3. 实现奇偶行变色
    $('li:odd').css('background-color', 'red')
    $('li:even').css('background-color', 'pink')
})

运行时报错：

Uncaught SyntaxError: Cannot use import statement outside a module

在项目中安装webpack

使用命令

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

在项目中配置webpack

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

// 使用node.js的到处语法，向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack的运行模式，可选值有 development 和 production
    mode: 'development'
}

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

"scripts": {
	"dev": "webpack"
}

在终端中运行npm run dev命令，启动webpack进行项目的打包构建

成功运行！

两种mode

• development，开发环境，包体积大，压缩时间小
• production，生产环境，包体积小，压缩时间大

指定打包入口和出口

webpack默认的打包入口为src/index.js，输出文件为dist/main.js

const path = require('path')

module.exports = {
    entry: path.join(__dirname, './src/index.js'),
    output: {
        // 输出文件的存放路径
        path: path.join(__dirname, './dist'),
        // 输出文件的名称
        filename: 'bundle.js'
    }
}

webpack中的插件

webpack-dev-server插件

问题描述

我们基本通过基本的使用，可以发现一个问题：如果修改了index.js文件，即修改了源程序，那么我们就需要重新使用命令进行打包。这样是有一些违背自动化的原则的。

简介

• 类似于node.js阶段用到的nodemon工具
• 每当修改了源代码，webpack会自动进行项目的打包和构建

安装

运行如下命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D

配置

1. 修改package.json -> scripts中的dev命令如下：

   "scripts": {
   	"dev": "webpack server"
   },
   

2. 再次运行npm run dev命令，重新进行项目的打包

3. localhost:8080访问

问题

webpack-dev-server会将dist/main.js保存在内存中，方便读取的速度。所以，在页面中引用main.js时，需要更改路径为：

<script src="/main.js"></script>

html-webpack-plugin插件

问题

当使用了webpack-dev-server，我们通过localhost:8080来访问页面。但是访问的页面不是我们编写的html页面，而是一个文件的目录结构。

html-webpack-plugin是为了解决这个问题。

安装

npm install html-webpack-plugin@5.3.2 -D

配置

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

const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html'
})

// 使用node.js的到处语法，向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack的运行模式，可选值有 development 和 production
    mode: 'production',
    plugins: [htmlPlugin]
}

devServer节点的配置

运行命令后，自动打开浏览器

module.exports = {
    devServer: {
        // 初次打包完成后，自动打开浏览器
        open: true,
        // 实时打包所是由的主机地址
        host: '127.0.0.1',
        // 实时打包所使用的端口号
        port: 80
        
    }
}

webpack中的加载器（loader）

loader概述

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

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

• css-loader打包处理.css相关的文件
• less-loader打包处理.less相关的文件
• babel-loader打包处理webpack无法处理的高级js语法

打包处理css文件

安装css文件的loader

npm install style-loader@3.0.0 -D
npm install css-loader@5.2.6 -D

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

module: {
    rules: [
        {
            test: /\.css$/, 
            use: ['style-loader', 'css-loader']
        }
    ]
}

注意：

use数组中指定的loader顺序是固定的

多个loader的调用顺序是：从后往前调用

打包处理less文件

安装less文件的loader

npm install less-loader@10.0.1 less@4.1.1 -D

less是一个内置依赖项，也就是说less-loader中依赖于less，不需要手动的声明

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

module: {
    rules: [
        {
            test: /\.less$/, 
            use: ['style-loader', 'css-loader', 'less-loader']
        }
    ]
}

打包处理样式表中与url路径相关的文件

安装loader

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

file-loader也是url-loader的一个依赖项

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

module: {
    rules: [
        {test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'}
    ]
}

其中？之后的是loader的参数项：

• limit用来指定图片的大小，单位是字节（byte）
• 只有<= limit 大小的图片，才会被转为base64格式的图片

打包处理js中的高级语法

webpack只能打包处理一部分高级的JavaScript语法，对于那些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理。

安装babel-loader所需要的包：

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

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

module: {
    rules: [
        {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
    ]
}

必须使用exclude指定排除项；因为node_modules目录下的第三方包不需要被打包

只转换自己写的代码。不要多管闲事。第三方包中的JS兼容性人家已经做好了，不需要程序员关心。

在项目根目录下，创建名为babel.config.js的配置文件，定义Babel的配置项如下：

module.exports= {
    // 声明babel可用的插件
    plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]]
}

打包发布

在package.json文件的scripts节点下，新增build命令如下：

"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
}

--mode是一个参数项，用来指定webpack的运行模式develpment和production

--mode会覆盖webpack.config.js中配置的mode

将图片统一生成在images目录中

修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径

{
    test: /\.jpg|png|gif$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 22228,
            outputPath: 'images'
        }
    }
}
or
{test: /\.jpg|png|gif$/, use: 'url-loader?limit=22228&outputPath=images'}

推荐使用第二种方式

自动清理dist文件

clean-webpack-plugin

自学链接

Source Map

简介

Source Map就是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

解决默认Source Map的问题

开发环境下，推荐在webpack.config.js中添加如下的配置，即可保证运行时报错的行数于源代码的行数一致。

module.exports = {
    devtool: 'eval-source-map'
}

生产环境下，不简易使用Source Map。这样能够防止原始代码通过Source Map的形式暴露给别有所图之人。

只定位行数不暴露源码

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。