webpack插件 原理
1、webpack 基本配置文件
一、webpack可以做什么事？
- 能够处理js文件的互相依赖性；
- 能够处理js的兼容问题，把高级的，浏览器不识别的语法，转为低级的，浏览器能正常识别的语法；
- 运行命令格式（手动打包出入口文件）：webpack 要打包的文件的路径 打包好的输出文件的路径；
- 如果在 webpack.config.js 文件中配置了 “出入口文件” ，运行命令格式直接就是：webpack ；
二、项目根目录下新建：webpack.config.js
webpack.config.js 文件的具体配置 参数 如下：
var path = require('path')
module.exports = {//在配置文件中需要手动指定 入口 和 出口
entry: path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪个文件
output:{//输出文件相关配置
path: path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录中去
filename: 'main.js'//指定 输出的文件的名称
},
mode:'development',//development production
plugins:[
//所有webpack 插件的配置节点
],
module:{//配置所有第三方模块 加载器 loader
rules:[//第三方模块的匹配规则
//处理...文件的第三方loader规则
]
},
resolve:{
extensions:['.js','.json','.vue'],//表示，这几个文件的后缀名 可以省略不写
alias:{//表示别名
'@':path.join(__dirname,'./src')//这样,@ 就表示 项目根目录中 src 的这一层路径
}
}
}
三、注意：
- webpack4.X以下 的版本，需要手动指定 “出入口文件”（entry 和 output ）。
- webpack4.X以上 的版本 提供了约定大于配置的概念，目的是为了尽量减少配置的体积。默认约定了：
- 打包入口文件是： src->index.js；
- 打包输出文件是： dist->main.js；
- 新增了 mode 选项（为必选项），可选值为：development 和 production。production：打包的时候 main.js 会被压缩；
- 所以不需要配置 entry 和 output 。但可以手动指定新的 “出入口文件”；
2、创建基本的webpack4.X项目
- 运行 npm init -y 快速初始化项目。生成 package.json 的文件；
- 在项目根目录创建 src 源代码目录和 dist 目录；
- 在 src 目录下创建 index.html ；
- 使用 cnpm 安装 webpack，运行 cnpm i webpack-cli -D；
- 如何安装 cnpm：全局运行 npm i cnpm -g；
- 注意：webpack4.X 提供了约定大于配置的概念，默认约定了：打包的入口文件是：src->index.js， 打包输出文件：dist->main.js；
3、webpack-dev-server 配置
作用：自动打包编译。安装配置好后可以直接：cnpm run dev，直接运行项目。
一、安装：cnpm i webpack-dev-server -D
二、在 package.json 文件中新增 “dev”，如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
在 “dev” 中进行端口、域名等…配置，如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot --host 127.0.0.1"
},
- open：直接打开浏览器 [open firefox ：默认打开火狐]
- port 3000：端口号 3000
- contentBase src：打开规定的目录(页面)
- hot：实现页面无刷新就获取新的数据
- host：域名
webpack-dev-server，是把打包好的main.js是托管到了内存中，所以在项目 根目录 中看不到；但是我们可以认为，在项目根目录中，有一个看不到的 main.js ；
这时在 index.html 文件中，引入根目录的 main.js 是这样的：
<script src="/main.js"></script>
4、html-webpack-plugin 配置
作用：自动在内存中根据指定页面生成一个内存的页面；自动把打包好的 main.js 追加到页面中去。
一、安装：cnpm i html-webpack-plugin -D
二、在webpack.config.js 中配置如下：
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins:[//所有webpack 插件的配置节点
new htmlWebpackPlugin({
template: path.join(__dirname,'/src/index.html'),//指定模板文件路径
filename: 'index.html'//指定生成内存页面的名称
}),
]
配置完后，在 index.html 文件中就不需要手动写入 main.js 。如下是 index.html：
5、webpack处理第三方文件类型的过程
一、webpack 本身是不处理的，它把第三方文件类型交给 loader 去处理。
二、webpack 处理第三方文件类型的过程：
- 发现这个要处理的文件不是 js 文件，然后去配置文件中，查找有没有对应的第三方 loader 规则
- 如果能找到对应的规则，就会调用对应的 loader 处理这种文件类型；
- 在调用 loader 的时候，是从后往前调用的；
- 当最后一个 loader 调用完毕，会把处理的结果，直接交给 webpack 进行打包合并，最终输出到 main.js 中去；
三、注意：webpack 默认只能打包处理 js 类型的文件，无法处理其它的非js类型的文件。如果要处理非 js 类型的文件，需要手动安装一些合适 第三方 loader 加载器。
四、比如要打包处理 css 文件：
- 需要安装cnpm i style-loader css-loader -D；
- 然后打开 webpack.configurable.js 这个配置文件，在里面新增一个配置节点，叫做 module ，它是一个对象；
- 在这个 module 对象身上有个 rules 属性，这个 rules 属性是个数组，这个数组中，存放了所有第三方文件的匹配和处理规则；
module:{//所有第三方 模块的配置规则
rules:[//第三方匹配规则
//处理css文件的loader
{test:/\.css$/,use:['style-loader','css-loader']},
]
},
6、babel 配置
作用：通过babel，可以将高级的语法转为低级的语法
一、概念： 在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的 ES6 语法或者 ES7 语法，webpack 是处理不了的，这时候，就需要借助于第三方的 loader，来帮助 webpack 处理这些高级的语法，当第三方 loader 把高级语法转为低级语法之后，会把结果交给 webpack 去打包到 main.js 中。
二、通过babel，可以帮助我们将高级的语法转为低级的语法，步骤：
（1）安装两套 babel 相关的 loader 功能：
- cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
- cnpm i babel-preset-env babel-preset-stage-0 -D
（2）在webpack.config.js 中配置如下：
module:{//所有第三方 模块的配置规则
rules:[//第三方匹配规则
//配置babel来转换高级的ES语法
{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
//不要忘记添加 exclude 排除项
]
}
注：在配置 babel 的 loader 规则的时候，必须把node_modules 目录，通过 exclude 选项排除掉，原因有俩：
- 如果不排除 node_modules，则 babel 会把 node_modules 中所有的第三方 js 文件都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
- 哪怕，最终 babel 把所有 node_modules 中的 js 转换完毕了，但是项目也无法正常 运行；
（3）在项目的根目录中，新建一个叫做 .babelrc 的 babel 配置文件，这个配置文件，属于JSON格式，所以在写 .babelrc 配置的时候，必须符合JSON语法规范：不能写注释，字符串必须用双引号；
{
"presets": ["env","stage-0"],
"plugins": ["transform-runtime"]
}