首页 > 网站 > WEB开发 > 正文

understand webpack part 1

2024-04-27 15:14:41
字体:
来源:转载
供稿:网友

What does webpack do


Why do we use build tools?

这里写图片描述

server side templating 例如:asp.net, php 等服务端脚本生成,而 Single Page App 由javascript 生成,spa需要管理大量的js module 依赖,所以,这就是webpack所解决的问题。


Module System

这里写图片描述


Webpack config

webpack 通过 webpack.config.js 执行一系列操作

这里写图片描述 webpack.config.js 定义一个普通的js object,包含一些字段。

const config = { entry: '', output:{}, ......}entry index.js 以及他所有引用过的module(图中的sum.js)都将被webbpack打包成一个文件(bundle.js)entry: './src/index.js'

output output 指定打包后生成的文件名和保存的路径,path为绝对路径output: { path: path,resolve(__dirname, 'dist'), filename: 'bundle.js'}

Running webpack

webpack 和 npm run build 的区别,如下:

这里写图片描述


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表