单文件打包的命令

npx webpack index.js

但是当我们在项目文件夹中将所有文件一起打包该怎么处理呢？

项目文件目录

我们在项目中执行npx webpack index.js打包出一个dist文件里有一个maiin.js完全ok，这时我们思考为什么回打包出一个dist文件？
这是因为webpack团队为了我们使用方便给了我们一个默认的配置文件，默认输出的文件夹为dist文件夹。但是当我们项目整体打包时，webpack不知道我们的那个文件为入口文件，自然也就打不成包了。

自定义webpack配置文件webpack.config.js

webpack官网给我们指出webpack有四个核心概念即入口（entry），输出（output），loader，插件（plugins）。

image.png

这里我们先讲前两个核心概念入口和输出，了解他们如何在配置文件中配置。

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

entry

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
理解：webpack以那个文件为起始文件

output

output 属性告诉 webpack 在哪里输出它所创建的 bundles（我们修改为bundle.js），以及如何命名这些文件，默认值为 ./dist（如上我们修改为了bundle文件夹）。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程

注意：

使用path时需要引入一个node的核心模块‘path’，调用核心模块‘path’的resolve方法，传入变量__dirname(此变量指此配置文件所在目录)，然后将此目录和bundle文件夹结合,即使用path.resolve(__dirname, 'bundle')来指定输出的文件夹。

如果我们不想以webpack.config.js为默认配置文怎么办？

比如我们将webpack.config.js文件修改为webpackconfig.js文件如何打包
此时我们只需要在打包的命令指定配置文件即可

npx webpack --config webpackconfig.js

如图，即可完成打包

指定配置文件打包