一、什么事webpack
webpack可以看作模块打包器，功能就是分析项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Scss,TypeScript等），将其打包为合适的格式以便浏览器使用，webpack实现了打包流程的自动化和功能化。
二、基本概念
2.1 Entry
入口设置webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。
2.2 Output
输出设置webpack打包后的资源bundles输出到哪里去，以及如何命名。
2.3 Loader
Loader让webpack能够去处理那些非JavaScript文件（webpack自身只能理解JavaScript）。
2.4 Plugins
插件可以用于执行范围更广的任务，插件的范围包括：打包优化、压缩、重新定义环境中的变量等。
2.5 Mode
模式设置webpack使用相应模式的配置。
image.png
三、安装webpack
// 初始化项目
npm init -y
安装
npm install webpack webpack-cli --save-dev
- 注意：
如果此时直接在项目下执行命令"webpack ./src/index.js -o ./build/built.js --mode=development",会报如下错误：
image.png
此时解决方案一：在命令前加npx即可；
解决方法二：在package.json里面的scripts中添加如下代码，然后就可以直接用yarn 或npm运行了。
"scripts": {
"build": "webpack ./src/index.js -o ./build/built.js --mode=development"
},
四、初步体验
image.png
结论：
（1）webpack能处理js/json
（2）不能打包css/img等其他资源
（3）生产环境比开发环境多一个压缩js代码
（4）生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
五、打包样式和html资源
webpack.config.js webpack的配置文件
作用：指示webpack进行什么操作(当运行webpack时会加载里面的配置)
所有构建工具都是基于nodeJs平台运行的，模块化默认采用commonJs;
// resolve用来拼接绝对路劲的方法
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// webpack配置
// 入口起点
entry: "./src/index.js",
// 输出
output: {
// 输出文件名
filename: "built.js",
// 输出路劲
// __dirname nodejs的变量，代表当前文件的目录，绝对路劲
path: resolve(__dirname, "build"),
},
// loader的配置
module: {
rules: [
// 详细loader配置
{
// 正则匹配文件
test: /\.css$/,
// 使用哪些loader进行处理，不同文件必须配置不同的loader处理
// use数组中的loader执行顺序:从右到左，从下到上，依次执行；
use: [
// 创建style标签，将js中的样式资源插入进行，添加到head中生效
"style-loader",
// 将css文件变成commonJs模块加载到js中，里面内容是样式字符串
"css-loader",
],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"], // less-loader将less文件编译成css文件，需要下less-loader和less
},
{
// 处理图片资源
// 改方法默认处理不了html中img标签引入的图片
test: /\.(jpg|png|gif)$/,
// 使用一个loader不用写use,可直接写loader，此处需要下载url-loader、file-loader
loader: 'url-loader',
options: {
// 图片大小小于8KB,就会被base64处理
// 优点：减少请求数量（减少服务器压力）
// 缺点：图片体积会更大（问价请求速度更慢）
limit: 8 * 1024,
}
},
],
},
// plugin配置
// html-webpack-plugin：会默认创建一个空的html,自动引入打包输出的所有资源（JS/CSS）;
plugins: [new HtmlWebpackPlugin({
// 复制'./src/index.html'文件，并自动引入打包输出的所有资源
template: './src/index.html',
})],
// 模式
mode: "development",
// mode: 'production',
};
在入口文件index.js中引入样式文件：
import './index.css';
import './index.less';
在index.html中引入打包后的资源：
<script src="./build/built.js"></script>
总结：loader的使用：下载—>配置使用
plugin的使用：下载—>引入—>配置使用
网友评论