以webpack 4 搭建项目，从简单开始

在如今 Web 前端的开发环境中，Webpack 已然成为构建应用必不可少的一员。其模块加载的标准化和代码的打包能力，让前端开发的质量和效率迈上了一个新台阶。

在这个以 Webpack 4 为主的舞台上，我们从0配置开始，将项目搭建起来，并以最简单的形式直面它的特性。与以往不同的是，新版本的 Webpack 给人一种眼前一亮的感觉。它减去了很多繁复的手动配置，极大的方便了前端开发。

1. 安装Webpack

开始之前，确保你已经安装了 Node.js。Webpack 是一个 Node.js 的模块，因此你必须先安装 Node.js。可以通过 Node.js 官网下载安装包，也可以使用 package manager 来安装，例如 npm 或 yarn。

安装了 Node.js 之后，就可以安装 Webpack。使用 npm 安装：

npm install webpack --save-dev

或者使用 yarn 安装：

yarn add webpack --dev

2. 初始化项目

接下来，创建一个新的目录，然后在该目录中运行以下命令，创建项目：

webpack-init

这将创建一个新的 Webpack 项目，并生成一个基本配置文件 webpack.config.js。

3. 配置Webpack

webpack.config.js 文件是 webpack 的配置文件。该文件用于配置 webpack 的各种选项，比如入口文件、输出文件、加载器等。

对于一个最简单的项目，webpack.config.js 文件的内容如下：

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

entry 属性指定了项目的入口文件。output 属性指定了项目的输出文件。

4. 创建入口文件

在 src 目录中，创建一个名为 index.js 的文件，作为项目的入口文件。该文件的内容如下：

console.log('Hello, Webpack!');

5. 运行Webpack

运行以下命令，编译项目：

webpack

这将生成 bundle.js 文件，该文件包含了 index.js 文件的内容。

6. 运行项目

在项目目录中，运行以下命令，启动一个本地服务器：

webpack-dev-server

这将启动一个本地服务器，并自动编译项目。

7. 访问项目

在浏览器中，访问 http://localhost:8080，即可看到项目运行的结果。

以上步骤，就是使用 Webpack 4 搭建项目的一个简单示例。虽然这是一个最简单的项目，但它足以让我们了解 Webpack 4 的基本原理和使用方式。

Webpack 4 的特性有很多，例如：

• 开箱即用的 Tree Shaking。Tree Shaking 是一种消除死代码的优化技术，可以减小最终的打包文件的体积。
• 代码分割。代码分割可以将项目中的代码分成多个文件，从而加快页面的加载速度。
• 模块联合。模块联合可以将多个模块合并成一个模块，从而减少 HTTP 请求的数量，提高页面的性能。

这些都是 Webpack 4 的强大特性，可以帮助我们构建出更高质量、更高性能的前端应用。

总之，Webpack 4 是一款非常强大的工具，可以帮助我们构建出高性能的前端应用。希望本文对大家有所帮助。