webpack基础入门(一)

一：前提

1：官网：https://github.com/webpack/webpack

2：参考文章url: http://blog.guowenfh.com/2016/03/24/vue-webpack-01-base/

二：安装

安装nodeJs和npm：因为webpack是基于node的项目，所以首先需要安装node.js 官网：http://nodejs.cn/，和npm

，新版的nodeJs已经集成了npm，所以nodeJs安装完成之后，npm也一并安装好了。

淘宝镜像：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装webpack

npm install webpack -g

项目中安装webpack

新建一个项目

npm init(确保已经进入项目目录，确定已经有package.json，没有就通过npm init 创建，直接一路回车就好)

npm install webpack --save-dev(简单的写法：“_”,缩写形式 npm i webpack -D -save:模块名将被添加到dependencies,可以简化为参数-S;-save-dev:模块名将被添加到devDependencies.可以简化为参数-D)

安装之后的package.json目录

环境安装完成，开始进入第一个webpack打包程序！

创建index.html 和一个js入口文件entry.js

entry.js

webpack打包

webpack entry.js bundle.js(将entry.js打包到bundle.js里面)

在浏览器打开index.html.就能看到文字。

新增一个first.js文件

更改entry.js

再次打包 webpack entry.js bundle.js

webpack会分析入口文件，解析包含依赖关系的各个文件。这些文件都打包到bundle.js。webpack会给每个模块分配一个唯一的id并通过这个id索引和访问模块。在页面启动时，会先执行entry.js中的代码，其他模块会在运行require的时候再执行。