webpack 最新版
之前说过老的版本，webpack@3.8.1 这个版本，现在我们来看看，新版本和老版本的区别
webpack 4 以上的版本
npm 全称 node package manager （node 包管理工具）
webpack 是 node 的，所以他遵循 node 语法
webpack 安装
1. 本地安装
npm i webpack webpack-cli -D
2. 全局安装
npm i webpack webpack-cli -g -D
webpack-cli ， webpack 的脚手架，实现了部分功能的优化
1. 可以 0 配置（也就是说我们可以不建 webpack.config.js 文件，自带了一些功能的实现）
比如：我们可以直接使用 npx webpack 指令之后，将当前 src 目录下的 index.js 文件 打包成 在dist 目录下的 main.js 文件
但是，由于只实现了部分优化，一是功能少，二是不够灵活，所以还是需要我们来对环境的配置
2. 我们如何分辨开发环境，还是生产环境？
看文件属于什么类：工具类的一般都属于开发环境，插件类的一般都属于生产环境
3. 我们如何分辨 旧版本 和 新版本的 webpack
通过 npx 指令 npx webpack 代表新版本的 webpack webpack 代表旧版本的 webpack
4. 自己手动的配置 webpack.config.js 文件
var path=require("path"); // node 自带的插件 用于对路径的处理
var Htmlwebpackplugin=require("html-webpack-plugin"); // 对 html 文件处理的插件
module.exports={
entry:{
index:"./index.js",
app:"./app.js"
}, // entry 代表入口文件，（也就是要被打包的文件）
// 属性值 可以是代表一个文件的 字符串，也可以是代表对象来表示多个文件
output:{
filename:"[name].js" // filename 代表出口的文件名，（就是打包后的文件）， 如果是多个文件，我们一定要这么写
path:path.resolve("dist") // 路径 因为是绝对路径，所以我们需要使用 node 中自带的模板，path.resolve 就会找到当前目录下的绝对路径
},
mode:"", // 这个是新版本 webpack 新增的配置属性 如果不写的话，就会给出警告，属性值就两个，porduction 压缩， development 未压缩版
module:{} // 我们模块配置所依赖的包 如 在 npm 官网中 输入 css-loader
plugins:[
new Htmlwebpackplugin({
filename:"./index.html", // 编译后的 html 文件
template:"index.html", // 编译前地 html 文件
minify:{
collapseWhitespace:true // 将 html 文件压缩为一行
},
chunks:["index","app"] // 依赖的 js 文件 与 entry 中的属性 保持一致
})
] // 开发过程中所依赖的插件 如：html-webpack-plugin 插件为例
devServer:{
open:true, // 自动打开浏览器
contentBase:"" // 配置根目录
}
}
如果我们想使用 webpack 中的虚拟服务器，我们需要下载文件 webpack-dev-server
1. 下载：npm i webpack-dev-server -D
2. 启动指令：webpack-dev-server
如果想使用 npm run 来启动指令：
我们需要在 package.json 中的 script 中设置
"start":"webpack-dev-server" // start 随意起名
"dev":"npx webpack" // dev 随意起名
启动指令
npm start
npm run dev