webpack基本使用与自动编译

webpack基本使用

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

使用场景：

1. 场景一：模块化开发, 处理依赖 。比如在demo目录下，有两个文件，a.js,b.js，需要把它们合并成一个bundle.js文件;
2. 场景二：多入口的情况下，webpack输出不同的打包文件。

基本使用：

首先创建一个文件夹目录，初始化 npm，新建文件./src/index.js, 然后本地全局安装webpack webpack-cli （4.X版本）

npm install -g webpack webpack-cli

（一）不通过配置文件直接使用

npx webpack 

或者

webpack

或者添加mode

webpack --mode=development

执行后输出文件 dist/main.js

（二）配置文件webpack.config.js

创建配置文件webpack.config.js (如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它, 也可以使用自定义名称的配置文件)<