webpack的安装与基本使用

最新推荐文章于 2024-09-04 23:26:56 发布

前端扫地僧

最新推荐文章于 2024-09-04 23:26:56 发布

阅读量358

点赞数

CC 4.0 BY-SA版权

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_45839045/article/details/123806600

本文介绍Webpack的基本概念及使用方法，包括如何通过Webpack将多个JS文件打包成一个文件，并配置Webpack生成HTML文件，最后解决CSS文件的打包问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack基本概念

目标: webpack本身是, node的一个第三方模块包, 用于打包代码

webpack官网

现代 javascript 应用程序的 静态模块打包器 (module bundler)
为要学的 vue-cli 开发环境做铺垫

webpack能做什么

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度(演示准备好的例子)

webpack基础使用

目标: 把src下的2个js文件, 打包到1个js中, 并输出到默认dist目录下

默认入口: ./src/index.js

默认出口: ./dist/main.js

注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名

初始化包环境
```
yarn init
```
安装依赖包
```
yarn add webpack webpack-cli -D
```
配置scripts(自定义命令)
```
scripts: {
	"build": "webpack"
}
```
新建目录src
新建src/add/add.js - 定义求和函数导出
```
export const addFn = (a, b) => a + b
```

新建src/index.js导入使用

import {addFn} from './add/add'

console.log(addFn(10, 20));

运行打包命令
```
yarn build
#或者 npm run build
```

总结: src并列处, 生成默认dist目录和打包后默认main.js文件

webpack 更新打包

目标: 以后代码变更, 如何重新打包呢

新建src/tool/tool.js - 定义导出数组求和方法

export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)

src/index.js - 导入使用

import {addFn} from './add/add'
import {getArrSum} from './tool/tool'

console.log(addFn(10, 20));
console.log(getArrSum([1, 2, 3]));

重新打包
```
yarn build
```

总结1: src下开发环境, dist是打包后, 分别独立

总结2: 打包后格式压缩, 变量压缩等

webpack-入口和出口

目标: 告诉webpack从哪开始打包, 打包后输出到哪里

默认入口: ./src/index.js

默认出口: ./dist/main.js

webpack配置 - webpack.config.js(默认)

新建src并列处, webpack.config.js
填入配置项

const path = require("path")

module.exports = {
    entry: "./src/main.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    }
}

修改package.json, 自定义打包命令 - 让webpack使用配置文件

"scripts": {
    "build": "webpack"
},

插件-自动生成html文件

目标: html-webpack-plugin插件, 让webpack打包后生成html文件并自动引入打包后的js

html-webpack-plugin插件地址

下载插件
```
yarn add html-webpack-plugin  -D
```

webpack.config.js配置

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此为基准生成打包后html文件
        })
    ]
}