# webpack4
**Repository Path**: tepno_admin/webpack4
## Basic Information
- **Project Name**: webpack4
- **Description**: webpack4
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-25
- **Last Updated**: 2022-09-28
## Categories & Tags
**Categories**: Uncategorized
**Tags**: webpack
## README
# webpack
## quick-start
#### 初始化文件
创建一个项目，项目下文件如下
```js
// src/heading.js
export default () => {
const element = document.createElement("h2");
element.textContent = "Hello world";
element.addEventListener("click", () => {
alert("hello webpack");
});
return element;
};
```
```js
// src/index.js
import createHeading from "./heading.js";
const heading = createHeading();
document.body.append(heading);
```
```html
webpack - quick start
```
文件准备好后，打开到浏览器
> 可全局安装 serve, 到项目目录下 输入 ```serve .``` 启动
#### 引入webpack
先初始化package.json 输入 ```npm init -y```
引入webpack webpack-cli 到开发依赖
webpack为4.0版本
> npm i webpack webpack-cli --dev
运行 ```yarn webpack``` 项目下多了dist目录，目录下有打包好的main.js
webpack 会 默认将`src/index.js` 打包到 `dist/main.js`
修改index.html
```html
```
再次启动到浏览器，一切正常！！！
## 配置文件
webpack会默认将`src/index.js` 打包到 `dist/main.js`
但是很多时候会需要自定义这些文件以及路径，那这时候就需要添加webpack配置文件
在项目下添加 `webpack.config.js` 文件，此文件需要按照 [CommonJS](http://javascript.ruanyifeng.com/nodejs/module.html) 规则编写
重命名 src/index.js 为 src/main.js
```js
// webpack.config.js
const path = require("path");
module.exports = {
// 配置入口 如果 entry 是一个相对路径 那么 './' 是不能省略的
entry: "./src/main.js",
// 配置出口
output: {
// 文件名
filename: "bundle.js",
// 文件所在目录 必须为绝对路径 x盘:\xx\xx\xx
path: path.join(__dirname, "output"),
},
};
```
重新打包 输出 dist/main.js
## 工作模式
提供 [mode](https://v4.webpack.docschina.org/concepts/mode/) 配置选项，告知 webpack 使用相应环境的内置优化。
> 可能的值有：`none`, `development` 或 `production` （默认）。
CLi 参数中传递
> yarn webpack --mode development
配置对象中 传递
```js
module.exports = {
mode: 'production'
};
```
## 资源模块加载
[module](https://webpack.js.org/concepts/#loaders)
```js
module: {
rules: [
{
// 正则匹配 文件
test: /.css$/,
// 注意多个loader 是 从后往前的顺序执行
use: [
// 页面调用
"style-loader",
// 编译css
"css-loader"
],
},
],
},
```
## 文件资源加载器
```js
module: {
rules: [
{
test: /.jpg$/,
use: "file-loader",
},
],
},
```
## URL 加载器
#### Data URLs
文件本身包含内容，不会发送请求
.jpg)
url-loader 把所匹配的文件转换为DataUrls的方式，文件过大会影响效率
小文件使用Data URLs，减少请求次数
大文件单独提取存放，提高加载数据
```js
module: {
rules: [
{
test: /.jpg$/,
use: {
loader: "url-loader",
options: {
// 添加过滤 10Kb
// 超出的文件 url-loader 会调用 file-loader进行打包，所以需要安装file-loader
limit: 10 * 1024,
},
},
},
],
},
```
## 常用加载器分类
- 编译转换类
- 文件操作类
- 代码检查类
## ES 2015
```js
module: {
rules: [
{
test: /.js$/,
use: {
// 需要安装 babel-loader @babel/core @babel/preset-env
loader: "babel-loader",
options: {
// 使用 @babel/preset-env
presets: "@babel/preset-env",
},
},
},
],
},
```
## 加载资源的方法
- 遵循ES Modules 标准的import声明
- 遵循CommonJs标准的require函数
- 遵循AMD标准的define函数和require函数
- *样式代码中的@import指令和url函数
- *html代码中图片标签的src属性
```css
/* main.css */
@import url(reset.css);
body {
min-height: 100vh;
background: #f4f8fb;
background-image: url(icon.jpg);
background-size: cover;
}
```
```css
/* reset.css */
* {
margin: 0;
padding: 0;
}
```
```js
// main.js
import "./main.css";
import footerHtml from "./footer.html";
document.write(footerHtml);
```
```html
```
```js
// webpack.config.js
...
{
test: /.html$/,
use: {
loader: "html-loader",
options: {
attrs: ["image:src", "a:href"],
},
},
},
```
## 核心工作原理
## 开发一个loader
### markdown-loader
loader 的 工作原理
about.md
```md
tepno 前端迷路人
```js
// markdown-loader.js
const { marked } = require("marked");
// 每个loader都需要去导出一个函数，
// 这个函数就是loader对所接收到的资源的一个处理过程
// 参数为加载到的资源内容
// 输出为此次加工过后的结果
module.exports = (source) => {
// console.log(source);
// return "console.log('hello ~')";
const html = marked.parse(source);
// return html
// return `module.exports = ${JSON.stringify(html)}`;
return `export default ${JSON.stringify(html)}`;
// 返回 html 字符串交给下一个loader处理，需要在use处添加处理的loader, html-loader
// return html;
};
```
```js
// webpack.config.js
{
test: /.md$/,
use: "./markdown-loader", // 可以使用路径
},
```