2-4 使用webpack的配置文件

1. 简介

webpack打包是根据配置文件来执行工作的。

2. 默认配置

之所以直接执行npx webpack index.js就能打包成功，是由于webpack内置了配置文件。 尝试直接运行npx webpack会报错，因为webpack不知道打包的入口文件是啥。但其实一个项目的入口文件是极少有变动的，每次都写很麻烦。有没有什么办法呢？

3. 修改配置文件

webpack默认读取的用户配置文件名叫做webpack.config.js。如果根目录下有这个文件，就会默认走这个文件，否则，会启用内置的配置。

const path = require('path');

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

此时再运行npx webpack命令就可以正确生成打包后的文件了。 然后整理一下文件夹，将源文件放到src目录下。如图：

image.png

修改webpack.config.js如下，

const path = require('path');

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

再次运行命令，一样是ok的。

4. 打包命令

实际上，我们可以利用npm脚本来自动执行命令。在package.json加上如下一行：

  "scripts": {
    "build": "webpack"
  }

然后运行npm run build。scripts中不需要额外再写npx，会自动从node_modules中去找寻指定执行文件。 总结一下webpack的打包命令方式：

1. 全局安装webpack时可以直接运行webpack
2. 项目内安装时可以运行npx webpack
3. 不管全局安装还是项目内安装都可以使用脚本命令，会优先从node_module中执行命令文件。 第三种无疑是最方便的，尤其是命令行包含了很多配置操作，导致命令很繁琐时。

5.作业

https://webpack.js.org/guides/getting-started