携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
实际上，Webpack 给我们提供了丰富的终端命令行指令，我们可以通过 npx webpack --help 命令查看。
可以看到 Webpack 给我们提供非常多的可选配项，详细这里我们不做过多的赘述，详细配置信息大家可以参考 Webpack 官网
下面我们演示一下加上这些参数该如何的去打包或者是设置我们的 Webpack。通过执行 npx webpack --entry ./src/index.js --mode production 命令来指定入口文件和环境。
可以看到正常生成 dist 目录和 main.js 文件，同时没有出现 'mode' option has not been set 警告信息。
你可能会问，dist 目录的名字和 main.js 文件的名字我们能不能自已来定义呢？答案是肯定可以。我们需要在命令行中输入其他的一些配置参数，介绍到这里，你可能发现，通过命令的方式指定配置信息非常的不方便，而且不直观，同时还不能保存这些配置。因此，Webpack 还给我们提供了通过一个配置文件来自定义配置参数的能力。
那下面，我们通过配置文件来配置这些参数。我们需要在项目的根目录下新建 webpack.config.js 文件。由于这个文件是在 Node.js 中运行的，因此我们在定义模块的时候需要使用 Node.js 的 CommonJS 模块。
// webpack.config.js
const path =require('path')
module.exports = {
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'./dist')
}
}
入口起点（entry point）指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。
我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成到哪里。
这里需要两点注意：
- webpack.config.js 配置文件的名称不能随便命名，原因是 Webpack 自动读取这个配置文件。
- 打包输出路径需要使用绝对路径，不能是相对路径，否则会报错。
执行 npx webpack 命令，可以看到能够正常打包。
打开 bundle.js 文件，发现它里边的内容与 main.js 完全不一样，详细内容我们后面在进行介绍。
如何验证我们自定义配置打包是否能够正确，在 index.html 文件通过 script 标签引入 bundle.js 文件。
<script src="./dist/bundle.js"></script>
在浏览器访问 index.html 地址，可以看到我们程序能够正常运行，说明我们 Webpack 打包成功了。
你可能又会思考，我们每次都要手工的在 HTML 里边修改 script 标签的 src 的路径和文件名吗？显然很不方便，在下一节中，在给大家介绍如何自动引入资源。
