webpack初学者系列一：what is webpack?

what is webpack,how does it work?

webpack is a build tool ,but it does more than just build your code. It actually manages your code. It allows you to create awesome web applications managing all your styles and javascript files and so on.

webpack 是一个构建工具，但是他能做的事情远远不止这些，他可以管理我们的代码、样式文件、js文件等。

传统的弊端

image.png

如果两份 js 文件调换了位置，程序就有可能出错。传统大型前端项目中，管理大量的 js 文件引用是个痛点。同时大型前端项目中也同样存在管理样式文件，压缩等工作。webpack可以就是来解决这些问题的一个工具。

webpack 使用

how to add webpack ? -- 怎么安装？

• 安装node.js
• npm install webpack

how to use it in project ? -- 在项目中怎么用？

• 最简单的方式：

// webpack entry outputfile
webpack  src/js/app.js  dist/bundle.js

image.png

• minify (参数）

// webpack entry outputfile
webpack  src/js/app.js  dist/bundle.js  -p