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

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

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

相关推荐
熊的猫30 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香2 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书