webpack01

万物皆对象

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