# webpack 是什么?
webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件
webpack 可以处理 js/css/图片、图标字体等单位
开发过程中存在于本地的 js/css/图片/图标字体等文件，就是静态的
动态的内容，webpack 没办法处理，只能处理静态的
关于静态和动态的例子
<!-- 静态 -->
<img src="./img/logo.png" alt="" />
<!-- 动态 -->
<img src="https://www.baidu.com/static/img/index/logo.png" alt="" />
# webpack 使用
- 初始化项目
- 安装需要的包
- 配置 webpack
- 打包并测试
初始化项目 npm init-y
安装webpack npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
如果安装过慢, 可以使用国内镜像, 可以起到加速的效果
npm config set registry https://registry.npm.taobao.org // 设置国内镜像
npm config get registry // 检测是否设置成功
重点webpack的核心配置和各个配置的含义
创建webpack.config.js文件，核心配置写在里面,具体代码如下
包括:
入口entry
**出口output **
模块配置定义规则module
模式设置mode
插件plugins**
在webpack.config.js里面配置webpack
完整的代码如下
// webpack打包的时候需要路径，所以需要引入引入自带的path
// 不然没法进行路径拼接,引入path目的就是为了拼接路径
const path = require("path");
// webpack打包的时候，只能生成一个静态的js,我们需要实现更多的功能，所以需要插件
// 要用的插件，先下载，再引入
// 导入插件
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 入口文件，entry 指定入口文件, webpack 要从哪个文件入手开始打包
// 也可以设置多入口，对应的就要设置多出口来接收
// 设置多入口的话，entry就要写成对象的形式entry:{}
// entry:{
// index:"./src/inidex.js"
// search:"./src/seach.js"
// }
entry: "./src/index.js",
// 出口路径
output: {
// 打包以后的文件位置，必须是绝对路径__dirname，不然报错
path: path.resolve(__dirname, "dist"),
// 打包以后保存的文件地址
filename: "bundle.js",
},
// 模式设置，如果不设置模式，打包以后的文件是经过压缩的，看不懂的
// 设置成开发模式以后，打包到新位置以后的文件是可以看懂的
mode: "development",
// 模块配置，webpack打包的时候，会把项目里面所有文件都扫一遍，
// 有些不需要打包的，就跳过，用module rules来定义规则
module: {
// 定义规则, 使用数组的原因: 可能有很多的loader, 每个loader 都可以单独配置
rules: [
{
test: /\.js$/, // 正则表达式, 文件夹下的所有js文件, 都会查找到并编译
exclude: /node_modules/, // 排除某些文件夹, 里面的js不需要编译
loader: "babel-loader", // 使用的loader名称
},
],
},
// 配置插件，如果不配置，插件，webpack打包的就只是一个静态的js
// 不同的插件有不同的功能，具体参见官方文档
plugins: [
// 最前面已经引入，要用的时候先用new操作符实例化一下
new HtmlWebpackPlugin({
// 这个插件里面的template意思是以这个index.html作为模板
// 有了这个index.html模板，配合插件plugin,webpack打包的时候，就会把html也打包到指定路径下面了
template: "./index.html",
// 使用了这个模板需要生成的文件名
filename:"index.html",
// 一个js可以导出多个html，所以加一个chunk
chunks: ["index"],
// 还可以进行其他样式设置
// minify设置生成的 html 文件的代码样式
// 加了minify以后，压缩后的文件把原有注释删除了，把空格和双引号也删除了
minify: {
// 删除 index.html 中的注释
removeComments: true,
// 删除 index.html 中的空格
collapseWhitespace: true,
// 删除各种 html 标签属性值的双引号
removeAttributeQuotes: true,
},
}),
// 如果打包的时候， 是多入口多出口，这里还要配置多一个模板
// 比如：
// new HtmlWebpackPlugin({
// template:"./search.html"
// 使用了这个模板需要生成的文件名
// filename:"search.html"
// })
],
};
说一下打包测试
运行npm run webpack，所以需要在pack.json里面设置一下
"scripts": {
"webpack": "webpack --config webpack.config.js"
},
意思是执行npm run webpack的时候，webpack会根据 webpack.config.js里面设置好的去对项目里面的文件进行打包
loader
webpack 本身只能处理 js, 不能处理 css 和图片
loader 可以让 webpack 去处理那些非 JS 文件的模块
官方的, 非官方的, 各种 loader, 可以满足各种需求
babel-loader
babel 和 webpack 配合, 把 ES6 编译成 ES3, ES5 代码, 以提高兼容性
babel 负责编译, webapck 负责打包
babel-loader, 负责连通 babel 和 webpack, 真正起到编译作用的是 babel
安装 webpacknpm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
安装 babelnpm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0
配置 babel, 创建 babel.config.json
{
"presets": ["@babel/preset-env"]
}
安装 babel-loadernpm install --save-dev babel-loader@8.1.0
配置 webpack
详细的代码查看上面完整版
增强 babel 编译功能
因为bable打包以后只能在指定目录生成一个js文件，我们要的是包括项目里面的html等文件，所以需要继续增强。
安装命令npm install --save-dev core-js@3.6.5
修改 js, 引入 core-js
// 源码\src\index.js
import "core-js/stable";
let name = "LiLei";
...
插件 plugins
loader 被用于帮助 webpack 处理各种模块，而插件则可以用于执行范围更广的任务
每个插件的功能都不同, 具体插件, 具体分析
官方插件: www.webpackjs.com/plugins/
HtmlWebpackPlugin
安装命令：npm install --save-dev html-webpack-plugin@4.3.0
安装完以后，需要在webpack导入并使用
HtmlWebpackPlugin 其他设置
plugins: [
new HtmlWebpackPlugin({
...
minify: {
// 删除 index.html 中的注释
removeComments: true,
// 删除 index.html 中的空格
collapseWhitespace: true,
// 删除各种 html 标签属性值的双引号
removeAttributeQuotes: true,
},
}),
最后项目的各个文件夹如下
