01-webpack核心基础-webpack简介与使用

作者: 仰望_IT | 来源:发表于2020-04-04 23:17 被阅读0次

01-webpack核心基础-webpack简介与使用
01-webpack使用
01-webpack的安装与初步使用
webpack简介与核心概念
Webpack 知识梳理
【IoT】加密与安全：PKI 安全体系浅析
webpack进阶——缓存与独立打包
开始使用webpack
01-webpack 初体验
前端知识体系4.前端工程化1.Webpack专题

一、webpack介绍

1、由来

由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐，然后 Instagram 团队就想让这些工作自动化，然后webpack应运而生。

2、介绍

webpack是一个模块打包器（module bundler），webpack视HTML，JS，CSS，图片等文件都是一种资源，每个资源文件都是一个模块（module）文件，webpack就是根据每个模块文件之间的依赖关系将所有的模块打包（bundle）起来。

3、作用

对 CommonJS 、 AMD 、ES6的语法做了兼容
对js、css、图片等资源文件都支持打包（适合团队化开发）
比方你写一个js文件，另外一个人也写一个js文件，需要合并很麻烦，现在交给webpack合并很简单
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6的支持；
有独立的配置文件webpack.config.js
可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
支持 SourceUrls 和 SourceMaps，易于调试；
具有强大的Plugin（插件）接口，大多是内部插件，使用起来比较灵活
webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快。
……

在Webpack的世界里有两个最核心的概念：
1. 一切皆模块
正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模块。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。

2. 按需加载
传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。

二、webpack安装

前提条件

在开始之前，请确保安装了 Node.js 的最新版本。推荐使用 Node.js 最新的长期支持版本(LTS - Long Term Support)。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

本地安装

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

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

npm install --save-dev webpack-cli

对于大多数项目，建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。

全局安装

以下的 NPM 安装方式，将使 webpack 在全局环境下可用：

npm install --global webpack

不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

打包js文件

我们安装好webpack后就可以对js文件进行打包了
运行以下命令

npx webpack index.js

注意: index.js就是需要打包的文件
打包之后的文件会放到dist目录中, 名称叫做main.js

三、Webpack核心概念

Webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包。下面是Webpack官网给的一个说明图。

如上图，webpack 会把项目中使用到的多个代码模块（可以是不同文件类型），打包构建成项目运行仅需要的几个静态文件（如.js、.css等）。

从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在webpack中有四个核心概念：
入口(entry)
输出(output)
loader
插件(plugins)

1、入口

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

入口使用 entry 字段来进行配置，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。例如：

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

// 上述配置等同于
module.exports = {
  entry: {
    main: './src/index.js'
  }
}

// 或者配置多个入口
module.exports = {
  entry: {
    foo: './src/page-foo.js',
    bar: './src/page-bar.js', 
    // ...
  }
}

// 使用数组来对多个文件进行打包
module.exports = {
  entry: {
    main: ['./src/foo.js',  './src/bar.js']
  }
}

2、输出

webpack 的输出即指 webpack 最终构建出来的静态文件，即打包构建成项目运行仅需要的几个静态文件。输出使用output进行设置。

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
}

// 或者多个入口生成不同文件
module.exports = {
  entry: {
    foo: './src/foo.js',
    bar: './src/bar.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
}

// 路径中使用 hash，每次构建时会有一个不同 hash 值，避免发布新版本时线上使用浏览器缓存
module.exports = {
  // ...
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
}

3、loader

webpack 中提供一种处理多种文件格式的机制，便是使用 loader。我们可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。(webpack 自身只理解 JavaScript)

在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的当我们需要使用不同的 loader 来解析处理不同类型的文件时，我们可以在 module.rules 字段下来配置相关的规则。例如使用 Babel 来处理 .js 文件。

module: {
  // ...
  rules: [
    {
      test: /\.jsx?/, // 匹配文件路径的正则表达式，通常我们都是匹配文件类型后缀
      include: [
        path.resolve(__dirname, 'src') // 指定哪些路径下的文件需要经过 loader 处理
      ],
      use: 'babel-loader', // 指定使用的 loader
    },
  ],
}

以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。
重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。然而，在定义错误时 webpack 会给出严重的警告。

loader 是 webpack 中比较复杂的一块内容，它支撑着 webpack 来处理文件的多样性。并且webpack 2.x 之后 module.loaders改成了module.rules。

4、插件

在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成。

webpack提供了“丰富的组件”来满足我们不同的需求，当然也可以自行实现一个组件来满足特定的需求。在webpack中，可以通过 plugins 字段来添加新的 plugin 。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
例如:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

常用的插件有：

HotModuleReplacementPlugin –开启全局的模块热替换(HMR)；
NamedModulesPlugin –当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息；
CommonsChunkPlugin –提取chunk公共部分；
ExtractTextPlugin –独立生成css文件，以外链的形式加载；
UglifyJsPlugin –压缩js；
HtmlWebpackPlugin –使用模版生成html。

理论上plugin可以干涉 webpack 的整个构建流程，可以在流程的每一个步骤中定制自己的构建需求。

webpack 提供许多开箱可用的插件！查阅插件列表获取更多信息。

四、webpack配置

什么是webpack配置文件?

我们在打包JS文件的时候需要输入: npx webpack index.js
这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中
其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外,
还可以通过配置文件的方式告诉webpack需要打包哪个文件

如何配置webpack文件

在根目录下手动创建一个webpack.config.js的文件, 在这个文件中进行webpack相关配置
webpack.config.js

const path = require("path");

module.exports = {
    // 监听打包文件变化，当它们修改后会重新编译打包
    watch: true,
    watchOptions: {
        aggregateTimeout: 300,  // 防抖, 和函数防抖一样, 改变过程中不重新打包, 只有改变完成指定时间后才打包
        poll: 1000,  // 每隔多少时间检查一次变动
        ignored: /node_modules/  // 排除一些巨大的文件夹, 不需要监控的文件夹
    },
    /*
    mode: 指定打包的模式, 模式有两种
    一种是开发模式(development): 不会对打包的JS代码进行压缩
    另一种是上线模式(production), 会对打包的JS代码进行压缩
    * */
    mode: "development", // "production" | "development" | "none"
    /*
    entry: 指定需要打包的文件
    * */
    entry: "./index.js", // string | object | array
    /*
    output: 指定打包之后的文件输出路径和输出的文件名称
    * */
    output: {
        /*
        filename: 指定打包之后的JS文件名称
        * */
        filename: "bundle.js",
        /*
        path: 指定打包之后的文件存储到什么地方
        * */
        path: path.resolve(__dirname, "bundle")
    }
};

配置好后就可以直接执行npx webpack打包, 后面不需要加上文件名称

注意
配置文件的名称必须叫做: webpack.config.js, 否则直接输入 npx webpack打包会出错
如果要使用其它名称, 那么在输入打包命令时候必须通过 --config 指定配置文件名称
npx webpack --config 配置文件名称

每次输入npx webpack --config xxx来打包文件会有一点麻烦, 所以我们可以通过npm script来简化这个操作
找到package.json文件的script节点

"script": {
    "test": "npx webpack --config 配置文件名称"
}

配置好后只需要执行npm run test即可

参考:
webpack中文文档: https://www.webpackjs.com/
Webpack简介与基本概念: https://juejin.im/entry/5b060d136fb9a07ac90d9675

01-webpack核心基础-webpack简介与使用
一、webpack介绍 1、由来由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐...
01-webpack使用
新建项目后初始化package.json 官方推荐本地安装要安装最新版本或特定版本，请运行以下命令之一：如果你...
01-webpack的安装与初步使用
hello大家好，本节主要是介绍webpack的安装与初步使用。初始化首先新建一个文件夹learnWebapck...
webpack简介与核心概念
【介绍】现代 JavaScript 应用程序的静态模块打包工具，能够递归构建一个js模块的依赖关系，将模块最终打...
Webpack 知识梳理
1. Webpack 简介及相关知识 Webpack —— JavaScript应用模块打包工具。 1.1 核心概...
【IoT】加密与安全：PKI 安全体系浅析
1、PKI 基础简介公钥基础设施（Public Key Infrastructure，缩写 PKI）的基础与核心...
webpack进阶——缓存与独立打包
系列：webpack入门——了解及使用webpack基础——常用配置解析先来看看最基础的webpack配置：在...
开始使用webpack
作者：叶茂；标签: webpack webpack配置文件 webpack配置文件是使用webpack的核心，会配...
01-webpack 初体验
先 npm init 创建 package.json 装webpack webpack-cli index.js ...
前端知识体系4.前端工程化1.Webpack专题
本文目录： 1.webpack的定义及基础核心概念 2.webpack构建原理 3.webpack运行的基本流程 ...