01_WebPack基础

入口和出口文件：

在我们打包一个项目的时候，他们都有默认的出口和入口文件，入口(./src/index.js) 出口(./dist)，那么我如果我的项目，入口比如是./src/main.js，出口是./build，该去如何指定呢？

1.在命令的后面加选项 如：npx webpack --entry ./src/main.js --output-path ./build

2.在package.json的scripts中指定："build": "webpack --entry ./src/main.js --output-path ./build"  那么我们要打包的话只需要执行 npm run build 指令

除了以上两种配置之外我们还可以单独在项目目录中配置一个单独的webpack配置文件

 

webpack.config.js

webpack.config.js导出一个配置对象，由于webpack查找到这个文件并且读取文件中的信息的时候使用的是commonjs(node环境下执行)的方式所以我们就用module.exports的方式去导出一个配置对象

入口出口：

 

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    // 输出入文件的名字
    filename: "bundle.js",
    // 输出的地方(不能直接写./build)这里要写绝对路径
    // path(node的内置模块)__dirname(当前文件所在的绝对路径),拼接上./build
    path: path.resolve(__dirname, "./build")
  }
}

 

那么我们的package.json中 "build": "webpack"，这样写就可以了，直接去执行npm run build

 

如果我的文件不叫webpack.config.js会发生什么，首先看看npm run build都做了什么

npm run build执行都做了什么：当我们执行npm run build的时候，他实际去执行了webpack的命令，当我们执行webpack的命令时又做了什么，首先它会去看一下，当前所在文件夹下边有没有一个叫webpack.config.js的文件，如果有他就会依赖这个文件中相关的配置，开始执行编译过程

如果没有这个文件会发生什么？它会去src文件夹中去找index.js，找不到就会报错，扎到就执行编译过程

 

如果我们的配置文件不想叫webpack.config.js，或者我想单独给他创建一个目录，放在其目录中怎么办

那么在package.json的scripts中设置"build webpack --config ./wp.config.js"
下次再执行npm run build的时候会默认去当前目录中去找wp.config.js并且依赖这个文件中的配置

官方文档地址：命令行接口（CLI） | webpack 中文文档 (docschina.org)

 

Webpack依赖图

假如我在项目中安装了element，但是没有使用，会不会打包进我最后生成的build.js文件中去

当我们安装了某个工具，但是在项目中没有对他进行一个引用，那么他最终不会打包进我最后生成的build.js文件中去 (Tree Shaking)

实际上webpack在处理应用程序时，它会根据命令或配置文件找到入口，从入口开始，会生成一个依赖图，这个依赖关系图会包含引用程序中所需的所有模块，然后遍历图结构,打包一个个模块(根据文件的不同使用不同的loader来解析)