# webpack-pro
**Repository Path**: Makabaka_chy/webpack-pro
## Basic Information
- **Project Name**: webpack-pro
- **Description**: webpack5项目打包以及相关配置
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-07
- **Last Updated**: 2024-02-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 前端工程化
### webpack
#### 为什么需要使用webpack
为了更快更好的开发程序，会大量用到模块化开发，以及一些优秀的预处理语言，比如sass less等，但是这些模块化工具不能被浏览器识别，所以需要将开发的代码转换为浏览器能识别的代码。
gulp和grant构建工具：任务的自动化
webpack：模块的自动化、文件的压缩合并、预处理功能
#### webpack是什么
用于现代js应用程序的静态模块打包工具
#### 安装webpack
npm i webpack webpack-cli --global 全局
npm i webpack webpack-cli --save-dev（npm i webpack webpack-cli -D） 局部开发依赖
npm i webpack webpack-cli -S 在开发和产品都依赖
#### 入口文件entry
****
#### 出口output
#### module处理文件
#### plugin插件
##### ①打包css文件
css-loader（打包css文件）
style-loader(将打包后的结果添加到html中)
npm i css-loader style-loader --save-dev
②html打包
html-webpack-plugin
```js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
// 加载器
// loader: {},
module: {
// 用css-loader 将打包的结果添加到html中style-loader
rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] }],
},
plugins: [
new HtmlWebpackPlugin({
template:"./src/index.html",
filename:"index.html"
})
],
mode: "development",
};
```
③打包less文件
npm install less less-loader --save-dev
```js
module: {
// 用css-loader 将打包的结果添加到html中style-loader
rules: [
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
],
},
```
④打包scss文件
安装sass-loader 和 node-sass
npm install node-sass sass-loader --save-dev
```js
module: {
// 用css-loader 将打包的结果添加到html中style-loader
rules: [
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
{ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
],
},
```
⑤打包图片
安装url-loader file-loader(webpack5已弃用)
```js
{
test: /\.(png|jpg|gif)$/,
type: 'asset',
//webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
},
```
安装html-loader
```js
{
test: /\.html$/,
loader: "html-loader",
options: {
// 关闭es6模块化
esModule: false,
},
},
```
⑥打包字体图标
安装file-loader（webpack5已弃用）
```js
{
exclude: /\.(html|png|jpg|gif|css|scss|less|js)$/,
type: 'asset/resource'
},
```
```html
//index.html
webpack打包
webpack
webpack
```
#### mode模式
```js
import path from "path";
module.exports = {
// 入口文件
entry: "src/index.js",
// 出口文件
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
// 加载器 默认只能处理js和json的文件
module: {},
plugins: [],
mode: "development",
};
```
#### webpack-dev-server
**基于`Node.js`构建的`Web`服务器，它可以在**本地开发环境中启动一个实时的Web服务器，并且能够自动编译并且刷新浏览器**，为前端开发提供了很大的便利**
安装:npm install webpack-dev-server --save-dev
配置:
```js
export default{
devServer:{
// npx webpack-dev-server
watchFiles:path.resolve(__dirname,"dist"),
port:8080,
open:true,
// 压缩
compress:true,
}
}
```