webpack--常见的构建工具及对比、概述、初体验

最新推荐文章于 2023-01-31 20:14:51 发布

小白小白从不日白

最新推荐文章于 2023-01-31 20:14:51 发布

阅读量488

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_43285360/article/details/117904018

版权

webpack 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

0.常见的构建工具及对比

a.Grunt：

Grunt 和 Npm Script 类似，也是一个任务执行者。Grunt 有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件 Gruntfile.js 里，例如：

module.exports = function(grunt) {
  // 所有插件的配置信息
  grunt.initConfig({
    // uglify 插件的配置信息
    uglify: {
      app_task: {
        files: {
          'build/app.min.js': ['lib/index.js', 'lib/test.js']
        }
      }
    },
    // watch 插件的配置信息
    watch: {
      another: {
          files: ['lib/*.js'],
      }
    }
  });

  // 告诉 grunt 我们将使用这些插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 告诉grunt当我们在终端中启动 grunt 时需要执行哪些任务
  grunt.registerTask('dev', ['uglify','watch']);
};

在项目根目录下执行命令 grunt dev 就会启动 JavaScript 文件压缩和自动刷新功能。

Grunt的优点是：

灵活，它只负责执行你定义的任务；
大量的可复用插件封装好了常见的构建任务。 Grunt的缺点是集成度不高，要写很多配置后才可以用，无法做到开箱即用。

b.Gulp

Gulp 是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。Gulp 被设计得非常简单，只通过下面5个方法就可以胜任几乎所有构建场景：

通过 gulp.task 注册一个任务；
通过 gulp.run 执行任务；
通过 gulp.watch 监听文件变化；
通过 gulp.src 读取文件；
通过 gulp.dest 写文件。 Gulp 的最大特点是引入了流的概念，同时提供了一系列常用的插件去处理流，流可以在插件之间传递，大致使用如下：

// 引入 Gulp
var gulp = require('gulp'); 
// 引入插件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// 编译 SCSS 任务
gulp.task('sass', function() {
  // 读取文件通过管道喂给插件
  gulp.src('./scss/*.scss')
    // SCSS 插件把 scss 文件编译成 CSS 文件
    .pipe(sass())
    // 输出文件
    .pipe(gulp.dest('./css'));
});

// 合并压缩 JS
gulp.task('scripts', function() {
  gulp.src('./js/*.js')
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
});

// 监听文件变化
gulp.task('watch', function(){
  // 当 scss 文件被编辑时执行 SCSS 任务
  gulp.watch('./scss/*.scss', ['sass']);
  gulp.watch('./js/*.js', ['scripts']);    
});

Gulp 的优点是好用又不失灵活，既可以单独完成构建也可以和其它工具搭配使用。其缺点是和 Grunt 类似，集成度不高，要写很多配置后才可以用，无法做到开箱即用。

c.Fis3

Fis3 是一个来自百度的优秀国产构建工具。相对于 Grunt、Gulp 这些只提供基本功能的工具，Fis3 集成了 Web 开发中的常用构建功能，如下所述。

读写文件：通过 fis.match 读文件，release 配置文件输出路径。
资源定位：解析文件之间的依赖关系和文件位置。
文件指纹：通过 useHash 配置输出文件时给文件 URL 加上 md5 戳来优化浏览器缓存。
文件编译：通过 parser 配置文件解析器做文件转换，例如把 ES6 编译成 ES5。
压缩资源：通过 optimizer 配置代码压缩方法。
图片合并：通过 spriter 配置合并 CSS 里导入的图片到一个文件来减少 HTTP 请求数。

// 加 md5
fis.match('*.{js,css,png}', {
  useHash: true
});

// fis3-parser-typescript 插件把 TypeScript 文件转换成 JavaScript 文件
fis.match('*.ts', {
  parser: fis.plugin('typescript')
});

// 对 CSS 进行雪碧图合并
fis.match('*.css', {
  // 给匹配到的文件分配属性 `useSprite`
  useSprite: true
});

// 压缩 JavaScript
fis.match('*.js', {
  optimizer: fis.plugin('uglify-js')
});

// 压缩 CSS
fis.match('*.css', {
  optimizer: fis.plugin('clean-css')
});

// 压缩图片
fis.match('*.png', {
  optimizer: fis.plugin('png-compressor')
});

可以看出 Fis3 很强大，内置了许多功能，无须做太多配置就能完成大量工作。

Fis3的优点是集成了各种 Web 开发所需的构建功能，配置简单开箱即用。其缺点是目前官方已经不再更新和维护，不支持最新版本的 Node.js。 Fis3 是一种专注于 Web 开发的完整解决方案，如果将 Grunt、Gulp 比作汽车的发动机，则可以将Fis3 比作一辆完整的汽车.

d.Webpack

Webpack 是一个打包模块化 JavaScript 的工具，在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。

一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

Webpack 具有很大的灵活性，能配置如何处理文件，大致使用如下：

module.exports = {
  // 所有模块的入口，Webpack 从入口开始递归解析出所有依赖的模块
  entry: './app.js',
  output: {
    // 把入口所依赖的所有模块打包成一个文件 bundle.js 输出 
    filename: 'bundle.js'
  }
}

Webpack的优点是：

专注于处理模块化的项目，能做到开箱即用一步到位；
通过 Plugin 扩展，完整好用又不失灵活；
使用场景不仅限于 Web 开发；
社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
良好的开发体验。 Webpack的缺点是只能用于采用模块化开发的项目。

一、概述

webpack 是静态模块打包器/工具，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件
webpack 可以处理 js/css/图片、图标字体等
开发过程中存在于本地的 js/css/图片/图标字体等文件，就是静态的
动态的内容，webpack没办法处理，只能处理静态的

支持以下几种方式：

ES Module模块引入方式(ES6 模块化)：

采用 ES6 模块化导入及导出时的代码如下：

// 导入
import { readFile } from 'fs';
import React from 'react';
// 导出
export function hello() {};
export default {
  // ...
};

ES6模块虽然是终极模块化方案，但它的缺点在于目前无法直接运行在大部分 JavaScript 运行环境下，必须通过工具转换成标准的 ES5 后才能正常运行。

CommonJS 模块引入规范：

CommonJS 是一种使用广泛的 JavaScript 模块化规范，核心思想是通过 require 方法来同步地加载依赖的其他模块，通过 module.exports 导出需要暴露的接口

// 导入
const moduleA = require('./moduleA');

// 导出
module.exports = moduleA.someFunc;

CommonJS 的优缺点在于：

代码可复用于 Node.js 环境下并运行，例如做同构应用；
通过 NPM 发布的很多第三方模块都采用了 CommonJS 规范。
缺点在于这样的代码无法直接运行在浏览器环境下，必须通过工具转换成标准的 ES5。

ADM define 和 require 语句

也是一种 JavaScript 模块化规范，与 CommonJS 最大的不同在于它采用异步的方式去加载依赖的模块

AMD 规范主要是为了解决针对浏览器环境的模块化问题，最具代表性的实现是 requirejs

采用 AMD 导入及导出时的代码如下：

// 定义一个模块
define('module', ['dep'], function(dep) {
  return exports;
});

// 导入和使用
require(['module'], function(module) {
});

AMD优点：

可在不转换代码的情况下直接在浏览器中运行；
可异步加载依赖；
可并行加载多个依赖；
代码可运行在浏览器环境和 Node.js 环境下。 AMD 的缺点在于JavaScript 运行环境没有原生支持 AMD，需要先导入实现了 AMD 的库后才能正常使用。

css/sass/less 文件中的 @import。

除了 JavaScript 开始模块化改造，前端开发里的样式文件也支持模块化。以 SCSS 为例，把一些常用的样式片段放进一个通用的文件里，再在另一个文件里通过 @import 语句去导入和使用这些样式片段

// util.scss 文件

// 定义样式片段
@mixin center {
  // 水平竖直居中
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

// main.scss 文件

// 导入和使用 util.scss 中定义的样式片段
@import "util";
#box{
  @include center;
}

样式(url(...))或 HTML 文件(<img src=...>)中的图片链接

二、Webpack 初体验

安装 Webpack 到全局

npm i -g webpack
npm i -g webpack-cli

安装 Webpack 到本地（推荐）

1.选择文件夹创建项目目录

mkdir webpack-demo
cd webpack-demo

2.初始化项目

npm init

3.安装 Webpack 到本项目，可按照你的需要选择以下任意命令运行：

npm i -D webpack 或 npm install --save-dev webpack@<version>(安装指定版本)

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack-cli(npm i -D webpack-cli)

注意：--save-dev 等价于 -D

具体操作如下：--在项目根目录下

1.初始化项目

npm init -y

初始化完成之后便会自动生成一个package.json文件：

2.安装 webpack 需要的包

npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1

安装完后在package.json文件里则会生成对应的：

但是在安装包之前需要注意package.json文件里的name名不能与save-dev webpack-cli@3.3.12 webpack@4.44.1里面的webpack重名，因此我们可以将package.json文件里的name名改为

3.配置 webpack

在项目的根目录下创建 webpack.config.js文件

然后在package.json文件里：

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

具体配置内容如下：

const path = require('path');

// 导出  mode设置模式：development--开发模式；默认为线上模式
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

注意：

配置文件的名称必须叫做 webpack.config.js ，否则直接输入 npm run webpack 打包会报错

如果要使用其他名称，那么在输入打包的时候必须通过 --config 指定配置文件名称:

然后在package.json文件里做修改：

"scripts": {
        "webpack": "webpack --config xxx.js"
    },

4.编译并测试

在执行编译之前需要先在package.json文件里进行如下修改：

执行编译：

npm run webpack

执行编译成功后便会在项目的根目录下生成一个dist文件夹，以及在dis文件夹里生成一个bundle.js文件

测试：

以我的项目为例：

a.在2.html页面中先测试index.js吧，那么就需先引入该文件，通过：

<script src="./src/index.js" type="module"></script>

然后通过服务器打开2.html文件（由于我是用的vscode编译器，因此只需下载一个live sever插件即可）

打开谷歌浏览器后我们可以看到：

打开火狐浏览器后：

打开IE浏览器（IE11/10）：

b.在2.html页面中再测试bundle.js，那么就需先引入该文件，通过：

 <script src="./dist/bundle.js"></script>

然后通过服务器打开2.html文件