webpack 是一个模块打包器，将代码资源（js，css）和非代码资源（图片，字体）当作模块，依据入口文件梳理依赖，打包成一个静态资源。

核心用法之Entry

概念：通过使用entry来指定打包的入口，对于非代码如： 图片，字体依赖也会不断的加入到这个图中。

用法： 单入口：entry是一个字符串(适用于只有一个页面和单页引用)

module.exports = {
   entry: "./src/index.js",
};

多入口：entry是一个对象(适用于只多页面的场景)

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

核心用法之Output

概念：用来告诉webpack如何将编译后的文档输出到磁盘，该配置于entry息息相关，entry用来指定打包的入口--对应源代码，output用来指定打包的输出-- 对应打包后的结果代码

用法： 单入口的用法：

module.exports = {
   entry: "./src/index.js",
    output: {
     filename: "bundle.js",
     path: path.join(__dirname, "dist"),
   },
};

多入口的用法：通过占位符[name]来确保文件名称的唯一

module.exports = {
   entry:{
   	app:'./src/app.js',
    adminApp:'./src/adminApp.js'
   }
    output: {
     filename: "[name].js",
     path: path.join(__dirname, "dist"),
   },
};

我们之前已经写过了单入口的例子，我们现在来看一下多入口是如何实现的，现在我们根据上一节的例子的基础上在src上再添加一search.js的文档。

document.write('search')

这个时候我们的webpack配置也要作出相应的调整：

"use strict";
const path = require("path");
module.exports = {
   entry: {
       index:"./src/index.js",
       search :'./src/search.js'
   },
    output: {
 		 path: path.join(__dirname, "dist"),
		 filename: "[name].js",
   },
   mode: "production",
};

接下来我们来验证一下我们的写法

rm -rf dist
npm run build

打包后的文件目录结构为：

核心用法之Loaders

概念： webpack的开箱即用只是支持js和json两种类型的文件，通过loaders去支持其他类型并且将他们转换成有效的模块，这样就可以添加到我们上面的依赖图中了，loader的本质是一个函数，接受的源文件作为参数，转换后的内容作为结果返回

常用的loaders有哪些呢？

用法：

"use strict";
const path = require("path");
module.exports = {
  entry: {
    index: "./src/index.js",
    search: "./src/search.js",
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [{ test: /\.txt$/, use: "raw-loader" }],
  },
  mode: "production",
};

test:指定匹配的规则 use：指定该规则使用的是什么loader

核心用法之Plugins

概念：用于bundle文件的优化，资源管理和环境变量的注入，作用于整个项目的构建过程，可以认为是loaders没有办法做到的事情，可以用plugins来进行操作

常见的plugins：

用法：

"use strict";
const path = require("path");
module.exports = {
  entry: {
    index: "./src/index.js",
    search: "./src/search.js",
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [{ test: /\.txt$/, use: "raw-loader" }],
  },
  plugins: [new HtmlWebpackPlugins({ template: "./src/index.html" })],
  mode: "production",
};

将要用到的插件放在plugins的数组中就可以了。

核心用法之mode

概念：用来指定当前的构建环境是：Production，developmen，none，设置mode可以使用webpack的内置参数，默认的webpack的配置是Production

在webpack 4 提出的概念。

ps：mode概念是在webpack4版本提出来的新的概念，可以一键设置一些常用的参数

mode的内置函数功能：