webpack域名配置-从零开始了解webpack4.0|| 附上《用简单易懂的语言写Webpack》电子版

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

作为现代 JavaScript 应用程序的静态模块打包器，webpack 可以将各种资源（例如 js、css、图像等）作为模块进行处理。 它是当前后端工程中非常流行的工具。 目前 webpack 的最新版本是 4.0。 本文将基于4.0，从用户的角度一步步教你理解并构建一个简单的webpack配置项目。 其实webpack的配置和使用都比较丰富和复杂。

两个基本依赖关系

首先，webpack项目的两个核心基础模块是webpack和webpack-cli，它们是webpack项目建立的前提

运行 webpack

默认情况下，webpack运行创建命令使用项目文件夹中的src/index.js作为入口文件。 运行 webpack 命令将执行默认的 webpack 配置文件。 一般情况下，需要创建一个满足项目需求的配置文件。 可以在package.json中使用--config配置webpack执行文件（如下）

通过指定配置文件设置好webpack配置文件后，接下来的工作就是根据需要配置并执行配置文件

入口文件

指定项目的入口文件

导出文件

请注意://publicPath 的解释。 例如，publicPath设置为static后，html页面中引用的URL会被手动加上static。

Tips：如何理解chunkFileName：chunkname是一个文件命名配置，不包含在条目中，但需要打包。 例如，一些公共模块需要单独分离。 此类公共模块可以用 chunkname 命名。 见下文。 代码分隔部分

配置多个入口文件

//写入硬盘：./dist/app.js, ./dist/search.js

干净的 webpack 插件

连续运行webpack指令webpack域名配置，每次都会生成不同的hash值不同的js脚本。 为此，我们需要一个插件。 每次创建工程前，请删除原来创建的文件夹。 clean-webpack-是首选。 插件的插件配置如下

clean-webpack-plugin相关参数配置

html-webpack-插件

webpack创建项目时，通过指定的入口文件，所有的jscss等都会以模块依赖的方式打包成一个或多个脚本文件。 一般情况下，脚本文件会附加到html文件中并运行。 这时，你需要将打包好的脚本文件注入到HTML中。 html-webpack-plugin插件的目的是使用HTML作为模板，将打包的脚本注入到模板中。 相关配置如下：

模式模式

所谓模式，webpack4.0默认的模式是‘生产’，可以通过mode修改模式为‘开发’ module.exports={mode:'development'//会process.env.NODE_ENV=== 'development'mode :'Production'//会process.env.NODE_ENV==='Production'}

webpack-开发服务器

生产配置/开发配置

生产模式要求：注意模块大小 开发模式要求：调试、热更新

在生产环境中，脚本默认被压缩。 在开发环境中，我们需要快速调试代码，因此需要一个本地服务器环境来访问webpack创建的静态文件。 webpack-dev-server是webpack官方提供的一个工具，可以基于当前的webpack创建配置静态服务来快速启动。

当模式为开发时，会有hotreload功能，即当源代码文件发生变化时，会立即更新当前页面，以便可以看到最新的效果。根据需要webpack域名配置，需要将配置文件分开分为生产配置和开发配置，需要使用一个通用的配置文件来使用 webpack-merge 合并对象。

下面说一下webpack-dev-server的配置。 webpack-dev-server 有多种配置。 具体可以参考webpack-dev-server官方文档的常用配置：

public：指定静态服务的域名。 当您使用Nginx作为反向代理时，应该使用此配置来指定Nginx配置使用的服务域名。 端口：指定端口号。 openPage：指定第一次访问的页面。 publicPath：指定已建立的路径。 在浏览器中访问静态文件应该使用哪个路径？ 默认为/。 例如设置为static时，默认访问静态文件的路径为：8080/static/bundle.js

Proxy 用于配置 webpack-dev-server 将特定 URL 的请求代理到另一台服务器。当你有一个单独的前端开发服务器请求 API 时，此配置很有用

装载机

Webpack提供了一种处理多种文件格式的机制，那就是使用loader。 我们可以将loader理解为一个转换器，负责将某种文件格式的内容转换成webpack可以支持打包的模块。 举个反例，在不添加额外插件的情况下，webpack 会默认将所有依赖打包到 js 文件中。 如果入口文件依赖于.hbs模板文件和.css样式文件，那么我们需要handlebars-loader来处理它。 .hbs文件需要css-loader来处理.css文件（虽然这里也需要style-loader，后面会解释），最终将不同格式的文件解析成js代码，方便打包在浏览器中运行。

CSS加载器

css-loader 负责解析CSS代码，主要是处理CSS中的依赖关系，比如引用外部文件的声明如@import、url()等。

样式加载器

style-loader 会将 css-loader 解析的结果转换为 JS 代码，并在运行时动态插入 style 标签，使 CSS 代码生效。

文件加载器

file-loader用于处理jpg/png/gif等文件格式

sass-loader 节点 sass

这两个加载器用于解析scss文件

巴别塔相关

为什么使用巴贝尔？ 目前部分低级浏览器不支持es6相关句型。 babel的目的是将es6相关句型转换成es5句型 npminstall-Dbabel-loader@babel/core @babel/preset-env

webpack4中需要安装的三个loader配置如下：

Babel 的三个 loader 可以处理箭头函数等 es6 句型，但是无法处理 Promise、Symbol 等新的内置对象，所以需要引入 babel-polyfill 进行全局转换 ps: babel-polyfill 需要放在生产中依赖项，即 npmi--savebabel-polyfill 和入口需要配置

Tips：可以明显发现打包后的bundle会比之前大100k左右。 原因是babel-polyfill会重写全局环境，这样做的好处是可以污染全局环境，减少打包文件的大小。 大小，这也是安装依赖项而不是 devDependency 的激励。 为此，webpack4.0提供了另一个plugin-transform-runtimenpminstall--save-dev@babel/plugin-transform-runtime

其他插件

在webpack构建过程中，插件用于处理更多其他构建任务。可以理解，模块代码转换工作由加载器处理，除此之外的任何其他工作都可以由插件完成。

uglifyjs-webpack-插件

uglifyjs-webpack-plugin 用于压缩js代码量。 在webpack4.0中，默认配置是压缩。 通过开发mode模式可以设置为不压缩。 默认模式为生产模式，其他默认配置可以参考：

定义插件

DefinePlugin是webpack的外部插件，可以直接使用webpack.DefinePlugin获取。 该插件用于创建一些可以在编译时配置的全局常量。 我们可以在webpack的配置中指定这个常量的值，例如：

通过前面的配置，您可以访问应用程序代码文件中配置的变量，例如：console.log("RunningAppversion"+VERSION);

if(!BROWSER_SUPPORTS_HTML5)require("html5shiv");

复制 webpack 插件

只要看这个插件的名字，你就可以知道它有什么功能。 是的，它是用来复制文件的。 我们通常把开发的所有源代码和资源文件放在 src/ 目录下，构建时会生成一个 build/ 目录，一般直接释放构建中的所有文件。 有些文件还没有被webpack处理过，我们希望它们出现在build目录中，那么我们可以使用CopyWebpackPlugin来处理它们。 让我们看看如何配置这个插件：...

提取文本 webpack 插件

webpack4.0之前使用extract-text-webpack-plugin将依赖的css分离到单独的文件中，这样可以使脚本文件显得更小。 webpack4.0 不再使用 extra-text-webpack-plugin 来分离 css 使用 mini-css-extract-plugin 代替

迷你 CSS 提取插件

Tips：该插件一般用于生产环境，使用时不能使用style-loader==ps：contenthash和hash的区别见第8部分

忽略插件

IgnorePlugin 和 ProvidePlugin 一样，也是 webpack 的外部插件，可以直接使用 webpack.IgnorePlugin 获取。 该插件用于忽略特定模块并阻止webpack打包此类指定模块。 比如我们使用moment.js的时候，直接引用后，里面有很多i18n代码，导致打包文件比较大，但是实际场景不需要这样的i18n代码，那么我们可以使用IgnorePlugin来忽略这些代码文件，配置如下：...

IgnorePlugin配置有两个参数，第一个是匹配导入模块路径的正则表达式，第二个是匹配模块对应的上下文，即目录名。

单独的代码文件

为了减少打包后的代码大小，并利用缓存加快静态资源的访问速度，需要将互不影响的不同代码块分开。 插件中引入了mini-css-extract-plugin来分离css文件。 另外，还建议将供公共使用的第三方解释器显式配置为公共部分。 由于实际开发中第三方库变更频率较低，因此可以防止公共chunk频繁变更导致Cache失效。

module.exports = {
  entry: {
    vendor: ["react", "lodash", "angular", ...], // 指定公共使用的第三方类库
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: "vendor",
          name: "vendor", // 使用 vendor 入口作为公共部分
          enforce: true,
        },
      },
    },
  },
  // ... 其他配置
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /react|angluar|lodash/, // 直接使用 test 来做路径匹配
          chunks: "initial",
          name: "vendor",
          enforce: true,
        },
      },
    },
  },
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: path.resolve(__dirname, "node_modules") // 路径在 node_modules 目录下的都作为公共部分
          name: "vendor", // 使用 vendor 入口作为公共部分
          enforce: true,
        },
      },
    },
  },
}...

ps：在此基础上，还需要在配置的输出中设置chunkFilename，来配置打包后这个第三方库的名称。

ps: hash、chunkhash 和 contenthash 的区别

每次创建哈希值时都会重新生成。 所有文件的哈希值都是相同的。 无论文件是否改变，都会重新生成所有文件，达不到缓存的效果； chunkhash根据不同的入口文件（Entry）分析依赖文件，构建对应的chunk，并生成对应的hash值。 例如，我们将一些公共模块或第三方依赖包独立分离出来，然后使用chunkhash来生成哈希值，只要不改变公共代码就不需要重新创建； 但是当css中使用chunkhash时，由于css和js使用相同的chunkhash，所以当只改变js时，css文件也会重新生成，所以我们在css中使用contenthash==

其他一些常见的配置

resolveresolve.alias 配置常用模块的相对路径

实际参考imoprtutlfrom'Util/sss'原文：importutilfrom'./src/util/sss'

可以定义配置resolve.extensions。 在解析模块路径时，webpack 会尝试补全这些后缀名以供您搜索。

明天的福利

明天给大家带来的是《Webpack in a Simple and Easy Way》的pdf版，这是很多后端男必备的。

有需要的男伴可以在公众号对话框回复关键字“套餐”来申请哦~

关注公众号“前端都知道”，分享Web全栈相关的热点知识和热点文章，让大家从新手成长为专家。