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 文件

　　　　　　　　　　templage:"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