webpack入门学习笔记02 —— 初始化一个webpack项目

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

上一篇: webpack入门学习笔记01 —— webpack基本简介

下一篇: webpack入门学习笔记03 —— 自定义脚本，帮助项目管理