关于前端:webpack入门学习笔记02-初始化一个webpack项目

当初咱们就开始正式学习 webpack 了，webpack 是帮忙咱们打包编译我的项目的，所以在正式开始之前，咱们须要初始化一个基于 webpack 的我的项目。

在本篇博客中，将会波及到以下的知识点：

初始化一个基于 webpack 的我的项目
领会 webpack 的默认打包设置
自定义 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 的我的项目也就创立好了，能够持续后续工作了。

我的项目创立好之后，咱们能够不对 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 默认打包模式是生产模式，即打包编译后的代码会被压缩。

以上咱们曾经应用 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 的打包模式、打包的入口文件、打包的进口文件等。上面对这三个配置选项做具体的阐明：

webpack 有两种配置模式：production（生产模式） 和 development（开发模式）。默认采纳的是 生产模式，在该模式下，打包编译后的代码会被压缩，节俭体积。

如果抉择 开发模式 , 那么最终的将不会被压缩，文件的体积会稍大。

webpack 进行打包编译，必定要有一个指定的入口文件，这个文件便能够通过该属性指定。默认的入口文件是 index.js 文件。如果要把它更改为其余的文件，批改该属性即可。留神这个属性能够应用 相对路径 指定。

webpack 打包编译后的代码放在哪里，是通过该属性指定的。在配置该属性的时候，要指定进口文件的 文件名 和门路。默认的门路是 dist 文件夹下的 index.js 文件。如果要批改为其余的门路和文件名，批改该属性即可。要留神，进口文件的门路配置要应用 绝对路径，能够参考我下面的写法。

当初讲完了 webpack 三个根本选项的配置，咱们就能够依据本人的需要来进行配置。后续会介绍其余的一些选项配置。大家加油！

关于前端:webpack入门学习笔记02-初始化一个webpack项目

1. 写在后面

2. 初始化一个基于 webpack 的我的项目

3. 领会 webpack 的默认打包设置

4. 自定义 webpack 的打包配置文件

1) mode: webpack 的配置模式

2) entry：webpack 的入口文件

3) output：webpack 的进口文件

5. 后记