这是sylu计算机协会第一次技术征文活动

webpack初识理解

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，是前端项目工程化的具体解决方案。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle(已经加载完毕和被编译后的源代码的最终版本)。

作用：处理各浏览器端 JavsScript 的兼容性问题（把最高新JS代码转化为基础代码，让IE等浏览器都能兼容）。
注意：在学习webpack前需要掌握一定的 JavaScript 基础及前端知识。

一、安装及初始化

新建项目空白目录，并运行npm init-y命令，初始化包管理配置文件package.json；
新建src源代码目录；
在项目终端运行如下的命令，安装webpack相关的两个包：npm install webpack@5.72.0 webpack-cli@4.9.2 -D；
在项目根目录中，创建名为webpack.config,js的webpack配置文件，并初始化配置：

module.exports ={
    //mode用来指定构建模式，可选值有development（开发模式）和production（生产模式）
    mode:'development'
}

在 package.json 的 scripts 节点中添加 "dev": "webpack"脚本；
在端中运行npm run dev命令，即可启动webpack进行项目的打包构建。

注意：完成如上步骤需要先安装node.js。点击了解如何安装

二、配置 webpack

1、入口(entry)

入口起点(entry point)是用于指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始；即告知 webpack 需要打包压缩哪个或哪些 js 文件。

进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的；
每个依赖项随即被处理，最后输出到称之为 bundles 的文件中；
可以通过在webpack配置中配置entry属性，来指定一个入口起点(或多个入口起点)，默认值为./src。

（1）单入口：

用法：entry: string|Array<string>

示例：

const config = {
 entry: {
    main: './path/entry/file.js'
  }
};
module.exports = config;

语法简写（单个main入口时）：

const config = {
  entry: './path/entry/file.js'
};
module.exports = config;

（2）多入口：

用法：entry: {[entryChunkName: string]: string|Array<string>}

示例：

// 分离 应用程序(app)和 第三方库(vendor)入口
const config = {	
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};
module.exports = config;

webpack 从 app.js 和 vendors.js 开始创建依赖图(dependency graph)。这些依赖图是彼此完全分离、互相独立的（每个 bundle 中都有一个 webpack 引导(bootstrap)）。这种方式比较常见于，只有一个入口起点（不包括 vendor）的单页应用程序(single page application)中。

// 多页面应用程序
const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};
module.exports = config;

使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

2、输出(output)

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件；即告知 webpack 打包压缩的 js 文件存放到何处并为它们定义名称。

注意，即使可以存在多个入口起点，但只指定一个输出配置。

（1）单入口：

在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：
filename 用于输出文件的文件名。
目标输出目录 path 的绝对路径。

const config = {
    output:{
        path: '/dist',
        filename: 'bundle.js'
    }
}
module.exports = config;

此配置将一个单独的 bundle.js 文件输出到 /dist 目录中。

（2）多入口：

如果配置使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

具体写法如下：

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

后记：

本篇笔记简单的记录了本人对webpack的浅显理解，并根据官网文档和自己的经验总结了使用webpack需要的基础配置；其他更加高级的配置、插件等，会在后续的学习笔记中呈现。 (如果有不对之处，欢迎大佬在评论区指正)

webpack学习笔记 —— 安装及初始化配置

webpack初识理解

一、安装及初始化

二、配置 webpack

1、入口(entry)

（1）单入口：

（2）多入口：

2、输出(output)

（1）单入口：

（2）多入口：

后记：