共计 2528 个字符，预计需要花费 7 分钟才能阅读完成。
1. 写在后面
当初咱们就开始正式学习 webpack 了，webpack 是帮忙咱们打包编译我的项目的，所以在正式开始之前，咱们须要初始化一个基于 webpack 的我的项目。
在本篇博客中，将会波及到以下的知识点：
- 初始化一个基于 webpack 的我的项目
- 领会 webpack 的默认打包设置
- 自定义 webpack 的打包配置文件
2. 初始化一个基于 webpack 的我的项目
这一步简略，咱们能够应用 npm 或者 yarn 包管理工具来帮忙咱们疾速初始化一个我的项目，置信很多前端从事者对这两个工具都不会生疏。所以这里就进行深刻解说这两款工具。
我习惯于应用 yarn，所以能够间接创立一个新的文件夹，而后在终端下运行命令 yarn init 即可初始化一个我的项目。在这一步可能会让你输出一些我的项目的根本信息，如下所示：
question name (test):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:你依据本人的理论状况输出即可，当然也能够一路回车，这样会应用默认的选项初始化一个我的项目。
初始化实现之后，在该文件夹下，会生成一个 package.json 文件，这个文件记录我的项目的根本信息，同时会记录之后咱们装置的第三方包。在前面的我的项目中，咱们还能够在外面定义一些脚本，帮忙咱们治理我的项目，这在前面的博客中会提到。
我的项目初始化实现之后，咱们须要装置两个包，即 webpack 和 webpack-cli，这两个包就是用来打包编译我的项目的。装置的步骤很简略，间接在终端下执行以下 yarn 命令即可：
yarn add webpack webpack-cli -D阐明一下：以上命令中的 -D 选项，表明这两个包是开发依赖，我的项目上线的时候不须要这两个包。
这两个包装置实现之后，这个基于 webpack 的我的项目也就创立好了，能够持续后续工作了。
3. 领会 webpack 的默认打包设置
我的项目创立好之后，咱们能够不对 webpack 进行配置即可进行应用，因为 webpack 有本人默认的配置。上面来领会一下它的默认配置。
在我的项目目录中创立一个 src 目录，用来寄存我的项目代码。在该目录下创立一个 index.js 文件，留神肯定是这个名字，这是 webpack 默认配置的要求。在该文件中，咱们应用 node 语法引入另外一个文件 name.js，代码如下：
let myName = require("./name.js")
console.log(myName);其中 name.js 文件中的代码如下：
module.exports = "Allen Feng"下面应用的是 Node.js 语法，如果应用浏览器来间接渲染的话，是不能胜利渲染的。这个时候咱们能够应用 webpack 进行打包编译，间接在终端中运行命令 npx webpack，略微期待一会即可打包胜利。
打包实现之后，察看我的项目目录，能够看到这个时候多出一个文件夹 dist，点进去之后能够看到打包后的文件 main.js。如果这个时候在 dist 文件夹下创立一个 html 文件，通过 script 标签 引入 main.js 文件便能够在浏览器的控制台中看到打印出的 Allen Feng。
这就是应用 webpack 的默认配置打包进去的成果，总结一下，在 webpack 的默认配置中：
- src 目录下肯定要有 index.js 文件，这是默认配置中指定的入口文件
- webpack 打包编译之后，会将最终的代码放在 dist 文件夹下。如果没有，就会创立该文件夹
- webpack 默认打包模式是生产模式，即打包编译后的代码会被压缩。
4. 自定义 webpack 的打包配置文件
以上咱们曾经应用 webpack 的默认配置对我的项目进行打包编译，然而咱们可能会遇到这样的需要：
- 我不想让 webpack 从 index.js 文件开始打包，而是从 App.js 文件开始打包
- 打包编译后的代码不放在 dist 目录下，而是其余目录
- 打包编译后的代码不要进行压缩
- ……
这个时候，咱们就能够自定义 webpack 的配置，来达到想要的成果。步骤很简略，在我的项目的主目录下（即和 package.json 同级）新建一个 webpack.config.js 文件，这是 webpack 的配置文件。在该文件中，能够书写以下代码对 webpack 进行配置：
let path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist")
}
}如代码所示，咱们能够在配置文件中，指定 webpack 的打包模式、打包的入口文件、打包的进口文件等。上面对这三个配置选项做具体的阐明：
1) mode: webpack 的配置模式
webpack 有两种配置模式：production（生产模式） 和 development（开发模式）。默认采纳的是 生产模式，在该模式下，打包编译后的代码会被压缩，节俭体积。
如果抉择 开发模式 , 那么最终的将不会被压缩，文件的体积会稍大。
2) entry：webpack 的入口文件
webpack 进行打包编译，必定要有一个指定的入口文件，这个文件便能够通过该属性指定。默认的入口文件是 index.js 文件。如果要把它更改为其余的文件，批改该属性即可。留神这个属性能够应用 相对路径 指定。
3) output：webpack 的进口文件
webpack 打包编译后的代码放在哪里，是通过该属性指定的。在配置该属性的时候，要指定进口文件的 文件名 和 门路 。默认的门路是 dist 文件夹下的 index.js 文件。如果要批改为其余的门路和文件名，批改该属性即可。要留神，进口文件的门路配置要应用 绝对路径，能够参考我下面的写法。
5. 后记
当初讲完了 webpack 三个根本选项的配置，咱们就能够依据本人的需要来进行配置。后续会介绍其余的一些选项配置。大家加油！
