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