WebPack-打包工具

从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求.

下面举个例子 :

main.js

我们只命名导出一个变量

复制代码
export const name="老六"

index.js

复制代码
import { name } from "./tset/main";
console.log(name+"-------------------"+name)

这里使用的是es6规范 所以我们需要降级到es5

先下载webpack

npm -i install webpack webapck-cli --save -dev

下载完毕后配置一下入口与出口

这里的入口和出口就是说 打包哪个项目 打包后输出到哪里

先打开下载好的package.json 添加一下内容

这里设置一下打包方式为webpack

复制代码
{
 "scripts": {
  "build":"webpack"
  
 }

再配置webpack的出入口:

新建webpack.config.js

复制代码
const path = require('path');

module.exports = {
//默认导出
    entry: './index.js',
//入口 entry 设置要打包的项目
    output: {
        path: path.resolve(__dirname, 'dist'),
//打包之后的输出地址
        filename: 'bundle.js',
//打包之后的新文件名字
    }
};

然后我们直接 终端输入 webpack

就会自动打包并且生成打包后的文件:

好的到这里最基本的打包就完成了 其他文件的打包会更新出来

相关推荐
华仔啊5 分钟前
Vue3+CSS实现一个非常丝滑的 input 标签上浮动画,设计师看了都点赞
前端·css·vue.js
北海道浪子9 分钟前
[免费送$1000]ClaudeCode、Codex等AI模型在开发中的使用
前端·人工智能·后端
明月与玄武14 分钟前
2025 前端框架决战:Vue 与 React 分析优缺点及使用场景!
前端·vue.js·react.js
无盐海30 分钟前
XSS漏洞攻击 (跨站脚本攻击)
前端·xss
不一样的少年_35 分钟前
1024程序员节:用不到100行代码做个“代码雨屏保”装X神器(附源码)
前端·javascript·浏览器
阿奇__40 分钟前
el-table默认排序设置
前端·javascript·vue.js
hongc931 小时前
element-ui el-table 设置固定列fixed 高度不对
前端·vue.js·elementui
Forfun_tt1 小时前
xss-labs pass-12
前端·xss
云枫晖1 小时前
Webpack系列-编译过程
前端·webpack
AskHarries1 小时前
Toolhub — 一个干净实用的在线工具集合
前端·后端