webpack默认打包

图 webpack默认打包

Q：执行“webpack”指令的时候，webpack是如何确定我们的入口和出口的呢？

• 事实上，当我们执行“webpack”指令时，webpack默认会查找当前目录下的src/index.js文件，将其作为入口文件，并且默认打包到dist/main.js中；
• 所以，如果当前目录下没有存在src/index.js文件，直接执行“webpack”指令是会报错的

通常情况下，webpack需要打包的项目是非常复杂的，那么我们就需要一系列的配置来满足要求，当然之前的默认配置必然是不可以的。（以入口 和 出口 配置为切入点）

Q：那我们如何指定入口和出口呢？

1）通过 entry 选项 和 output-path 选项

npx webpack —entry ./src/main.js —output-path ./build

webpack官网 - 中文文档 - API - 命令行接口：可用于查询这些选项

缺点：每次打包都要敲很长的指令，麻烦

2）在 package.json中配置（同第一种方法）

将第一种方法中的长指令写到 package.json 文件中，每次打包只需要执行 npm run build 即可

缺点：如果这个指令配置的选项非常多，这个命令太长了，而且可读性很差。真实开发环境中，我们一般不会这么配置

3）在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件（极力推荐）

注意！！！entry值可以是一个相对路径；但是output的path值必须是一个绝对路径，如果使用相对路径会报错

指定webpack的配置文件

但是，如果我们的webpack的配置文件并不是 webpack.config.js（默认的） 的名字，而是其他的名字呢？

• 比如，我们将 webpack.config.js 修改成了 wk.config.js；
• 那么这个时候我们可以通过 —config 来指定对应的配置文件

  执行 npm run build 的顺序

  • 去package.json文件中查找build，执行里面的命令“webpack”；

  • 然后，看当前目录下有无webpack.config.js 文件。

    • 如果有的话，webpack会依赖文件中的相关配置，然后开始执行相关的编译过程；
      • 如果没有，依然会将当前目录下的src/index.js文件作为入口文件，并将打包文件输出到/dist/index.js 中（即使你写了webpack配置文件但并没有用，因为你的配置文件不叫默认的那个配置名）

webpack的五个核心配置项

• 1.entry
• 2.output
• 3.loader
• 4.plugin
• 5.mode