webpack: 打包工具 前端必备
对webpack的理解：
Webpack可以看作是一个模块的打包机，它做的事情就是分析你的项目结构，找到了模块以及其它的一些浏览器不能使用的拓展语言。并将其转换和打包为合适的格式提供浏览器使用
为什么要用webpack?
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求
webpack的作用：
1.打包（可以处理js的依赖关系）
2.转换（less,sass,loader工具处理）
3.优化（把优化功能做了）
webpack的一些核心东西:
1.入口entry
2.出口output
3.转换器loader
4.模式mode
5.服务器devServer
webpack如何初始化配置：
(1) Entry 应用程序的起点入口,可以是一个文件，如果传递一个数组，那么那么数组的每一都会执行，也可以是一个对象。
(2) Output 位于对象最顶级键(key),包括了一组选项，指示webpack 如何输出，
以及哪里输出，和他你所打包或使用webpack 载入的任何内容。
(3)Plugins引入插件
(4)loader就是webpack 用来预处理模块的，在一个模块被引入之前，会预先
用loader处理模块的内容。
webpack如何打包？
webpack entry<entry> output （命令行）
webpack -config webpack.conf.js (指定webpack的配置文件)
搭建webpack步骤：
在C盘终端执行前三个指令
1.(c)npm install webpack -g 全局安装webpack
2.(c)npm install webpack-cli -g 全局安装webpack
3.(c)npm init -y 创建webpack
4.创建一个src源文件，src里创建两个文件index.html , index.js
5.创建一个dist文件夹。它是打包生成的的文件，里面创建一个index.html
6.终端： webpack src/index.js --output dist/bundle.js
7 (或者). 配置webpack.config.js 文件
const path = require("path")
module.exports={
//入口
entry:"./src/index.js",
//出口
output:{
path:path.resolve(__dirname,"dist") // 设置默认的出口位置
filename:"bundle.js" // 设置默认的出口的文件名
}
}
终端 ：webpack
在src文件夹下的index.js 引入 import ... from "路径"
终端 ： webpack(再次打包，并删除起初dist文件夹的bundle.js)
8.webpack-dev-server 安装，他的作用就是自动编译 热加载（局部加载）
cnpm i webpack-dev-server -D
如果出现图片上的警告，就输入以下指令：
cnpm i webpack -D
cnpm i webpack-cli -D( 解决警告问题)
package中"scripts"内写入："dev": "webpack-dev-server --open --port 8080 --contentBase src --hot" 配置在scripts对象李
--open 自动打开浏览器
--port 端口号
--contentBase 默认加载路径
--hot 热加载
此文件终端输入指令： npm run dev
然后下载插件指令： cnpm i html-webpack-plugin -D
可以在内存(webpack.config)中 取到 打包之后的 js文件
const htmlWebpackPlugin = require("html-webpack-plugin");
plugins:[
new htmlWebpackPlugin({
filename:"index.html",
template:path.join(__dirname,"./src/index.html")
})
]
dist文件夹的index.html 文件里面引入的js 便可 去掉了
代码如下：
