WebPack

最新推荐文章于 2024-04-22 18:00:11 发布

原创最新推荐文章于 2024-04-22 18:00:11 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端

本文介绍了如何利用Webpack进行代码优化，包括减少文件数量、压缩和打包代码，以提高浏览器加载速度。通过安装和配置Webpack，创建固定名称的输入和输出文件，以及自定义命令，实现代码的自动化打包。此外，还展示了如何更改入口和出口文件名称以增加灵活性。通过使用Webpack.config.js，可以进一步定制打包设置，如指定入口文件和输出文件名。

好处

减少文件数量，缩减代码体积，提高浏览器打开速度。

本质

第三方模块包；用于识别，压缩，打包代码；提高网站打开速度。

终端下载yarn，npm i -g yarn

（可以不用yarn，用npm,但yarn更好。）

WebPack使用

初始化：yarn init 一直按回车键

下载依赖包 : yarn webpack webpack-cli -D

在json文件里，配置scripts (自定义命令)。

{
  "name": "anli1",
  "version": "1.0.0",
  "main": "index.js",
  "author": "mm",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  },
  "scripts": {
    "build": "webpack"
  }
」

将两个包打包成一个：

先新建一个src文件夹（名字不可变），再建一个add文件夹，里面建一个js文件。再建一个同级的index.js文件（名字不可变）。

add.js: export const fn2 = (a, b) => { return a + b }

index.js: import { fn2 } from './add/add';console.log(fn2(1, 2));

终端运行：yarn build

会给我们新建一个dist. main.js就是我们打包后的代码

2.以上写法，出入口名称都是固定的名称，下面改变出入口名称。

新建一个webpack.config.js文件,输入

// 人物属性
const path = require('path');

module.exports = {
    entry: './src/ind-copy.js', // webpack入口文件名
    output: { // 出口
        path: path.resolve(__dirname, 'dist'),//出口文件夹
        filename: 'zidingyi.js',  //出口文件名
    },
};