零配置？webpack 3. webpack-cli 打包，就是这么简单！

webpack 是一款用于前端模块打包和构建的工具，它可以将多个模块组合成一个或多个文件，从而减少HTTP请求数量，提高页面加载速度。在本文中，我们将介绍如何使用webpack 3. webpack-cli进行零配置打包，带领您领略webpack的强大之处。

1. 准备工作

首先，我们需要在项目中安装webpack和webpack-cli。在项目目录下，打开终端并执行以下命令：

npm install --save-dev webpack webpack-cli

2. 创建webpack配置文件

接下来，我们需要在项目目录下创建一个webpack配置文件，通常命名为webpack.config.js。该文件用于配置webpack的打包规则和选项。

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'main.js'
  }
};

3. 安装必要的模块

在开始打包之前，我们需要安装必要的模块，包括要打包的代码以及相关依赖。在项目目录下，打开终端并执行以下命令：

npm install --save axios react react-dom

4. 运行webpack

一切准备就绪后，就可以运行webpack进行打包了。在项目目录下，打开终端并执行以下命令：

npx webpack

webpack将根据配置的规则和选项，对代码进行打包和压缩，并生成最终的打包文件。

5. 查看打包结果

打包完成后，可以在项目目录下的dist文件夹中找到打包后的文件，通常命名为main.js。您可以使用浏览器打开该文件，查看打包后的代码。

以上就是使用webpack 3. webpack-cli进行零配置打包的详细步骤。通过本文，您已经掌握了webpack的基本使用方法，可以轻松地为您的前端项目进行打包和构建。

除了上述内容，本文还为您提供了以下额外技巧：

• 使用webpack-dev-server进行开发

webpack-dev-server是一个开发工具，它可以快速地编译和打包代码，并提供一个本地服务器，以便您能够实时查看代码的修改效果。

• 使用webpack插件

webpack提供了丰富的插件系统，您可以使用插件来扩展webpack的功能，例如压缩代码、添加代码注释、进行单元测试等。

• 使用webpack-merge进行配置文件合并

如果您需要在多个环境中使用不同的webpack配置，可以使用webpack-merge进行配置文件合并，从而避免重复编写相同的配置代码。

希望本文能够对您有所帮助。如果您有任何问题或建议，欢迎在评论区留言。