项目脚手架搭建概要

1.npm install

一个项目如果需要npm来加载依赖包，那么他就需要先做npm的初始化，npm初始化过程是通过npm init来完成的。当我们输入npm init之后，会接着让我们输出一些参数信息，比如：项目名称、作者之类的。初始化成功后会在项目的根目录下生成package.json的npm配置文件，所有的npm信息都在里面。 用npm安装依赖包的时候，可以使用npm install xxx@v.v.v命令,执行完该命令后会在项目根目录下生成node_modules的文件夹，所有npm的源文件都会放在这里。 卸载依赖包的命令：npm uninstall xxx@v.v.v 参数：-g指全局安装 参数： --registry=https://registry.npm.taobao.org,用来指定nmp源地址，如果在国内使用npm install时觉得很慢，可以用参数registry把npm源指向国内的淘宝源

Paste_Image.png

2.webpack

webpack是一种模块化工具。设计初衷是require anything，就是想把前端涉及的所有文件，都通过js的require组织起来，最后以js为入口。它能够require anthing的基础，是因为它有各种各样的loader插件来引入各种各样的文件，甚至当你需要的文件没有现成插件能引用的时候，你还可以自己去写一个loader插件。webpack是天成支持commonjs规范的，它的编译原理是用node.js把commen下的模块，即commenjs模块，全部转化为浏览器支持的funtion形式的模块，然后再用一个模块加载器来组织这些模块，这样commonjs的模块化方案就能通过webpack的转换在浏览器上运行了。

Paste_Image.png

3.webpack的安装

我们一般是通过npm来安装webpack。在安装的过程时，我们先要安装一个全局的webpack，命令： npm install webpack -g；然后再初始化我们项目里的webpack依赖，命令：npm install webpack@1.15.0(一个版本号) --save-dev。最后安装完webpack的时候，可以通过命令webpack-v来查看我们安装的版本号

Paste_Image.png

4.webpack安装过程中可能的疑问

1.为什么全局安装的时候不适用版本号，而在安装项目依赖的时候就用了？

• 这个问题涉及到npm的加载原理：npm会优先使用项目本地的npm包，如果没找到的时候，才去全局的npm包里找，我们在全局安装就是为了提供npm的命令，而真正用到的来时本地的安装包版本。 2.本地安装的时候加了一个--save-dev,这是什么意思？
• 这是npm的另一个机制，它会把包的信息存放到package.json的文件里，这样就能记录项目的依赖了。例如通过--save-dev安装了npm包以后，包的名称和版本都会被自动存到package.json的文件里，会存放到devDependencies文字段。 还有另外一种方式是--save,这种方式安装的包会被存放到dependencies文字段。这两个的区别：其实就是加了dev的存放开发时的辅助工具，一般不会被打包进业务代码，也就是我们的测试工具、打包工具之类的都可以放这。而没有dev的dependencies字段里放的是业务代码的依赖包，比如我们项目依赖jQuery，就可以把jQuery放在dependencies

5.webpack的配置文件（webpack的核心内容）

webpack对各种文件的处理方式都是在这里配置的，webpack的配置文件默认指向的是根目录下的webpack.config.js文件。这个文件其实就是commonjs的一个模块，而模块的最终输出就是一个json形式的配置文件。wenpack的配置文件里有如下几个主要的 字段：

• 1.entry：它是js的入口文件，这里放我们源文件中js的路径。
• 2.externals：是外部依赖的声明，一些外部的内容可以用它来转化成commonjs可引用的模块。
• 3.output：定义了目标文件的内容。
• 4.resolve：用来配置目录的别名。
• 5.module：它里面是各种文件的loader。
• 6.plugins：用来加载webpack的插件。

对于webpack来说，它最重要的就是webpack的loader，它能够require anything就是通过loader来实现的。 常用的loader：

• 1.加载HTML时，用：html-webpack-plugin或者html-loader
• 2.加载JS时，用：babel-loader 和 babel-preset-es2015
• 3.加载CSS时，用：style-loader 和 css-loader
• 4.图片和字体等其他静态资源image + font，都可以用：url-loader

Paste_Image.png

6.webpack的常用命令

• webpack：用来规定以不压缩的形式打包，常用于调试代码。
• webpack-p：用来做线上发布时的打包，会把所有文件做最小化压缩。
• webpack --watch：是用来监听文件的改变而自动编译，一般用于开发过程。

7.webpack-dev-server

作用：前端开发服务器，启动后可以通过localhost的形式来访问我们的项目。 特色：最大的用途是可以在文件改变时，自动刷新浏览器。 安装命令：npm install webpack-dev-server --save-dev,安装完以后需要在webpack的配置文件里加一些东西。就是我们需要把webpack-dev-server的client打包进业务代码。

• 配置：npm install webpack-dev-server/client?http://localhost:8080，配置完以后我们就可以启动webpack-dev-server
• 使用：npm install webpack-dev-server --port 8088 --inline,--inline的作用就是把webpack-dev-server的client直接用脚本的方式插入到页面

Paste_Image.png