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三个根本选项的配置，咱们就能够依据本人的需要来进行配置。后续会介绍其余的一些选项配置。大家加油！