webpack博客_ღ໊晴天ꦿ的博客-爱代码爱编程
一、webpack了解
什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
Scss，less等CSS预处理器…
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。
webpack打包原理
把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。
webpack的优势
（1） webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
（2）能被模块化的不仅仅是 JS 了。
（3） 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
（4）扩展性强，插件机制完善
官方文档：
二. webpack打包工具的安装
webpack打包工具依赖nodejs. nodejs环境依赖各种包, 这些包使用npm进行管理 npm就是用来管理node下的各种包的
第一步: 安装nodejs
在官网下载nodejs:https://nodejs.org/zh-cn/ 安装好以后可以查看nodejs的版本
node -v
第二步: 安装webpack
首先查看本机是否已经安装了webpack, 使用命令查询
webpack --version
如果没有安装, 则安装全局的webpack
npm i webpack webpack-cli -D
三. webpack的基本使用
Loader的使用
npm i class-loader style-loader -D
css-loader处理.css文件style-loader把css加载到style标签内
module.exports = {
module: {
rules: [
// 当文件名test通过，使用如下插件
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
]
},
}
处理图片
安装 npm i file-loader url-loader -D
作用 加载图片和文件
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
use: [{
loader: "url-loader", // 使用url加载器
options: { limit: 5000, name: 'images/[hash].[ext]' },
// 文件命名 images文件夹，hash值（计算出图片的名称） ext后缀名
}]
}
]
},
}plugin插件
Plugin 的配置很简单，plugins 配置项接受一个数组，数组里每一项都是一个要使用的 Plugin 的实例，Plugin 需要的参数通过构造函数传入。
安装:npm i html-webpack-plugin -D
作用:生成html模板文件，自动把打包好的js插入到模板文件
在webpack.config.js 导入
const HtmlwebpackPlugin = require(“html-webpack-plugin”)
plugins:[
new HtmlwebpackPlugin({template:"./public/index.html"})
]