#安装webpack V4+版本是，需要额外安装webpack-cli
npm install webpack webpack-cli -g
#检查版本
webpack -v
#卸载
npm uninstall webpack webpack-cli -g

全局安装webpack 会将项目中的webpack锁定到指定版本，造成不同项目中因为webpack依赖不同版本而导致冲突，构建失败。当然这种冲突也可用webpack项目中局部安装来避免，接下来介绍。

#安装罪行的稳定版本 -D指的是安装到开发环境 -S 生产环境
npm i -D webpack 
#安装指定版本
npm i -D webpack@<version>
#安装最新的体验版本 可能包含bug 不建议用于生产环境
npm i -D webpack@beta
#安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

webpack -v  //command not found 默认在全局环境中查找
npx webpack -v //npx 帮助我们在项目中的node_modules里查找webpack
./node_modules/.bin/webpack -v// 到当前的node_modules模块里指定webpack

我这里实在一个空的项目下初始化并安装webpack

• webpack默认支持JS模块和JSON模块
• 支持CommonJS ES module AMD等模块类型
• webpack4支持零配置使用，但是很弱，稍微复杂的场景都需要额外扩展

• 新建src文件夹
• 新建src/index.js、src/index.json、src/other.js

###index.js

const json = required("./index.json");//commonJS
import {add} from "./other.js";//es module
console.log(json,add(2,3));


###index.json

{
   "name":"JSON"
}

###other.js
export function add（n1,n2）){
   return n1 + n2;
}

npx webpack

举例

webpack 执行构建首先会找webpack.config.js配置文件，找不到走默认配置 以下的webpack默认配置

entry:
支持三种类型 字符串，数组，对象（多入口）
字符串，数组都是输出到指定的一个资源文件

对象类型可配置多入口，生成多个资源文件

webpack 只支持.json和. js模块 不支持不认识的其他格式的模块

• 作用于webpack打包整个过程
• webpack的打包过程是由（生命周期概念）钩子
• plugin可以在webpack运行到某个阶段的时候，帮你做一些事情，类似于生命周期的概念扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或者你想要的事情

HtmlWebpackPlugin
htmlwebpackplugin会在打包结束后，自动生成一个html文件，并把打包生成的js模块引入到该html中。

npm install --save-dev html-webppack-plugin

cleanWebpackPlugin
做清理工作

npm install --save-dev clean-webpack-plugin

引入插件

const {CleanWebpackPlugin} = require("clean-webpack-plugin");

每次编译打包会清理打包文件夹下的文件重新生成新的编译文件