webpack详解（）

Posted 2021-04-29 视觉码农

webpack说简单很简单，但是要想用好也是一门功夫，之前由于工作上用不着也没有去深究，每次写vue，react都是cli自动生成，什么webpack环境压根一窍不通，能用就行了吧，这次花了一天多的时间来专门研究webpack，也以此文章做个mark，希望今后再遇到能够得心应手。

webpack-starter

1、项目初始化

1

npm init

一路回车即可！最终会生成package.json文件，如下所示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

{ "name": "webpack-starter", "version": "1.0.0", "description": "``` bash\r npm init\r ```\r 一路回车即可！最终会生成package.json文件，如下所示：\r ``` json", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/swimly/webpack-starter.git" }, "author": "", "license": "ISC", "bugs": { "url": "https://github.com/swimly/webpack-starter/issues" }, "homepage": "https://github.com/swimly/webpack-starter#readme" }

接下来全局安装webpack。

1	npm i -g webpack  // 已安装的跳过

在该项目安装webpack

1	npm i -D webpack

package.json:

1 2 3

"devDependencies": { "webpack": "^2.3.2" }

创建如下目录结构：

1 2 3 4

+ src - app.js + dist package.json

app.js

1	console.log('hello from app.js')

到此就可以用webpack进行简单的打包

1	webpack ./src/app.js ./dist/app.bundle.js

1 2 3 4 5 6 7

webpack ./src/app.js ./dist/app.bundle.js Hash: 59e49fa6a143615fafca Version: webpack 2.3.2 Time: 64ms Asset     Size  Chunks             Chunk Names app.bundle.js  2.66 kB       0  [emitted]  main [0] ./src/app.js 32 bytes {0} [built]

1	webpack ./src/app.js ./dist/app.bundle.js -p //打包出来的文件被压缩处理

1	webpack ./src/app.js ./dist/app.bundle.js -p --watch //打包出来的文件被压缩处理,并且实时监听文件的变化

这时候就可以看到dist目录下会生成一个app.bundle.js文件，呃，如果每次都这样打包，那这样还有什么乐趣可言。