什么是webpack?Webpack的核心概念

更新日期: 2019-05-27阅读量: 3033标签: webpack

webpack已经流行好久了,但很多同学使用webpack时还是一头雾水,一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例外,以至于很长一段时间对webpack都是一知半解的状态。但是想要继续做好前端,webpack是必须得跨过的一道坎,其实掌握webpack并不难,只是我们没有找到正确的方法。本文就是我自己在学习webpack时的一点心得体会,供大家参考。


什么是webpack?

一句话概括:webpack是一个模块打包工具(module bundler)。重点在于两个关键词“模块”和“打包”。什么是模块呢?我们回顾一下曾经的前端开发方式,js文件通过script标签静态引入,js文件之间由于没有强依赖关系,如果文件1要用到文件2的某些方法或变量,则必须将文件1放到文件2后面加载。随着项目的增大,js文件之间的依赖关系越发错综复杂,维护难度也越来越高。这样的困境驱使着前端工程师们不断探索新的开发模式,从后端、app的开发模式中我们获得灵感,为什么不能引入“模块”的概念让js文件之间可以相互引用呢?模块1要使用模块2的功能,只需要在该模块1中明确引用模块2就行了,而不用担心它们的排列顺序。基于这种理念,CommonJS和 AMD规范被创造了出来,然后有了require.js、system.js这样的前端模块加载工具和node的模块系统,直到现在流行的es6 module

模块的引入解决了文件之间依赖引用的问题,而打包则解决了文件过多的问题。当项目规模增大,模块的数量数以千计,浏览器如果要加载如此多的文件,页面加载的速度势必会受影响,而bundler可以把多个关联的文件打包到一起从而大量减少文件的数量提高网页加载性能。提供模块化的开发方式和编译打包功能就是webpack的核心,其他很多功能都围绕它们展开。


核心概念

Module(模块)

对于webpack,模块不仅仅是JavaScript模块,它包括了任何类型的源文件,不管是图片、字体、json文件都是一个个模块。Webpack支持以下的方式引用模块:

Dependency Graph(依赖关系图)

所谓的依赖关系图是webpack根据每个模块之间的依赖关系递归生成的一张内部逻辑图,有了这张依赖关系图,webpack就能按图索骥把所有需要模块打包成一个bundle文件了。

Entry(入口)

绘制依赖关系图的起始文件被称为entry。默认的entry为 ./src/index.js,或者我们可以在配置文件中配置。entry可以为一个也可以为多个。

单个entry:

module.exports = {
  entry: './src/index.js'
}

或者

module.exports = {
  entry: {
    main: './src/index.js'
  }
};

多个entry,一个chunk

我们也可以指定多个独立的文件为entry,但将它们打包到一个chunk中,此种方法被称为 multi-main entry,我们需要传入文件路径的数组:

module.exports = {
  entry: ['./src/index.js', './src/index2.js', './src/index3.js']
}

但是改种方法的灵活性和扩展性有限,因此并不推荐使用。

多个entry,多个chunk

如果有多个entry,并且每个entry生成对应的chunk,我们需要传入object:

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js'
  }
};

这种写法有最好的灵活性和扩展性,支持和其他的局部配置(partial configuration)进行合并。比如将开发环境和生产的配置分离,并抽离出公共的配置,在不同的环境下运行时再将环境配置和公共配置进行合并。

Output(出口)

有了入口,对应的就有出口。顾名思义,出口就是webpack打包完成的输出,output定义了输出的路径和文件名称。Webpack的默认的输出路径为 ./dist/main.js。同样,我们可以在配置文件中配置output:

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
};

多个entry的情况

当有多个entry的时候,一个entry应该对应一个output,此时输出的文件名需要使用替换符(substitutions)声明以确保文件名的唯一性,例如使用入口模块的名称:

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

最终在 ./dist 路径下面会生成 app.js和search.js两个bundle文件。


Loader(加载器)

Webpack自身只支持加载js和json模块,而webpack的理念是让所有的文件都能被引用和加载并生成依赖关系图,所以loader出场了。Loader能让webpack能够去处理其他类型的文件(比如图片、字体文件、xml)。我们可以在配置文件中这样定义一个loader:

webpack.config.js

module.exports = {
  module: {
    rules: [
      { 
        test: /\.txt$/, 
        use: 'raw-loader' 
      }
    ]
  }
};

其中test定义了需要被转化的文件或者文件类型,use定义了对该文件进行转化的loader的类型。该条配置相当于告诉webpack当遇到一个txt文件的引用时(使用require或者import进行引用),先用raw-loader转换一下该文件再把它打包进bundle。

还有其他各种类型的loader,比如加载css文件的css-loader,加载图片和字体文件的file-loader,加载html文件的html-loader,将最新JS语法转换成ES5的babel-loader等等。完整列表请参考 webpack loaders


Plugin(插件)

Plugin和loader是两个比较混淆和模糊的概念。Loader是用来转换和加载特定类型的文件,所以loader的执行层面是单个的源文件。而plugin可以实现的功能更强大,plugin可以监听webpack处理过程中的关键事件,深度集成进webpack的编译器,可以说plugin的执行层面是整个构建过程。Plugin系统是构成webpack的主干,webpack自身也基于plugin系统搭建,webpack有丰富的内置插件和外部插件,并且允许用户自定义插件。官方列出的插件有 这些

与loader不同,使用plugin我们必须先引用该插件,例如:

const webpack = require('webpack'); // 用于引用webpack内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件

module.exports = {
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};


实践

了解webpack的基本概念之后,我们通过实践来加深理解。接下来,我们使用webpack搭建一个简易的react脚手架。


创建项目

首先创建react-webpack-starter项目并使用 npm init 初始化。


安装依赖

安装react

npm i react react-dom

安装webpack相关

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader

安装webpack-cli后可以在命令行中执行webpack命令;webpack-dev-server提供了简易的web服务器,并且在修改文件之后自动执行webpack的编译操作并自动刷新浏览器,省去了重复的手动操作;html-webpack-plugin用于自动生成index.html文件,并且在index.html中自动添加对bundle文件的引用;style-loader和css-loader用于加载css文件。

安装babel相关

由于react中使用了class, import这样的es6的语法,为了提高网站的浏览器兼容性,我们需要用babel转换一下。

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

其中@babel/core是babel的核心模块,包含了babel的核心功能;@babel/preset-env支持转换ES6以及更新的js语法,并且可根据需要兼容的浏览器类型选择加载的plugin从而精简生成的代码;@babel/preset-react包含了babel转换react所需要的plugin;babel-loader是webpack的babel加载器。


配置webpack

在项目根目录下面新建webpack.config.js,内容如下:

webpack.config.js

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_module/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 注意排列顺序,执行顺序与排列顺序相反
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

其中HtmlWebpackPlugin使用自定义的模版来生成html 文件,模版的内容如下:

./src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My React App</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>


配置babel

在项目根目录下面新建.babelrc文件,配置我们安装的两个babel preset:

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}


生成react应用根节点

./src/index

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('app'));

./src/component/App.js

import React, { Component } from 'react';
import './App.css';

export default class App extends Component {
  render() {
    return (
      <div>
        my react webpack starter
      </div>
    )
  }
}

./src/components/App.css

body{
  font-size: 60px;
  font-weight: bolder;
  color: red;
  text-transform: uppercase;
}


配置 package.json

最后,在package.json文件里面加上两个scripts,用来运行开发服务器和打包:

package.json

"scripts": {
  "start": "webpack-dev-server --mode development --open --hot",
  "build": "webpack --mode production"
}

注意,我们启用了webpack-dev-server的模块热更新功能(HMR),进一步提高我们的开发效率。

到此一个最简版本的react脚手架就搭建完成了,是不是没有想象中的那么难呢?当然webpack还有很多其他的功能和特性需要掌握,希望在参考本文之后大家进一步的学习更加顺利


来自:https://github.com/MudOnTire/webpack-tutorial


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/3443

WebPack中Plugins的使用和整理,以及常用的Plugins插件

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件

webpack 构建多页面应用初探

如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。使用webpack这个构建工具,可以使我们少考虑很多的问题。

webpack是什么?

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

webpack—url-loader 解决项目中图片打包路径问题

刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里。下面我们就来分析下在webpack项目中图片的应用场景。

Webpack 4正式发布了!

新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!

webpack的异步加载原理及分包策略

webpack ensure 有人称它为异步加载,也有人称为代码切割,他其实就是将 js 模块给独立导出一个.js 文件,然后使用这个模块的时候,再创建一个 script 对象,加入到 document.head 对象中,浏览器会自动帮我们发起请求

浅谈webpack优化

由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相关的优化知之甚少

你必须知道的webpack插件原理分析

在 webpack 中,专注于处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。它和 loader 有以下区别:loader 是一个转换器,将 A 文件进行编译成 B 文件,比如:将 A.less 转换为 A.css,单纯的文件转换过程。webpack 自身只支持 js 和 json 这两种格式的文件

Webpack中如何编写一个自定义的loader

Webpack中loader是一个CommonJs风格的函数,接收输入的源码,通过同步或异步的方式替换源码后进行输出。需要注意的是,该导出函数必须使用function,不能使用箭头函数,因为loader编写过程中会经常使用到this访问选项和其他方法。

《深入浅出webpack》有感

nodejs的出现对于构建工具具有重要的意义,在没有nodejs之前,js只能执行在浏览器环境下,所以意味着对发布前的js文件要进行处理,十分局限,没有打包工具,只能用PHP脚本来处理文件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!