webpack的基本使用

前言：

需要掌握npm包管理工具的使用，最好掌握NodeJs的基本使用，如果还没了解过建议先去看30、NodeJS/NodeJs.doc文档入门

1、先新建一个空白文件夹，命名为webpack

2、cmd中进入刚刚新建的webpack文件夹

cmd中打开webpack文件夹并查看文件夹

3、全局安装webpack

npm install -g webpack

下载完成

4、安装依赖到项目目录

npm install webpack，项目中安装webpack

安装完成

5、查看此时文件目录（cmd查看即可）

查看发现多了一个文件与一个文件夹  

6、开始配置项目初始化

其实初始化项目应该是第一步，不过算了

package.json

        在项目目录中进行项目初始化，初始化完成将自动创建一个pageage.json文件

        可以在编辑器中查看pageage.json的信息，发现就是刚才的初始化信息

pageage.json

7、手动创建文件

在项目根目录中创建两个空白文件夹app和public，然后再在app文件夹里面创建两个js文件（main.js和Greeter.js），在public中创建一个html文件（index.html）

新建文件

8、编辑index.html代码（简单）

创建并index.html并引入app.bootstrap.js文件

        注意此时app.bootstrap.js文件是不存在，我们的目标是打包生成该文件

9、编辑Greeter.js（返回一个dom元素）

Greeter.js

10、编辑main.js（加载Greeter.js）

main.js

11、使用webpack打包文件（手动打包）【第一种】

我们需要根据main.js文件，把所需文件（自动查找所需文件）打包成app.bootstrtap.js文件，所以先进入文件根目录，再把目标文件打包到目标路径

webpack  源文件路径  目标文件路径

打包成功，生成app.bootstrap.js

查看文件可以看到生成的目标文件

12、查看inde.html

既然完成了打包，那么去看一下效果，直接在浏览器中打开index.html（如果需要服务器环境，可以使用vs2010的查看，更可以用nodejs启动服务器）

这里采用直接打开的形式，不过发现一个好用的npm模块，anywhere，支持直接创建服务器

可以查看到效果，打包无误

13、查看打包文件片段

app.bootstrap.js源文件

14、通过webpack.config.js打包（通过配置文件方式）【第二种】

当项目比较简单的时候手动打包还可以，当项目复杂的时候手动打包会比较麻烦，下面介绍如何通过配置文件的方式进行打包

为了说明情况，这时候可以把前面打包成的app.bootstrtap.js文件删除。我们先在项目根目录创建的一个配置文件webpack.config.js

配置文件内容如下：

webpack.config.js

接下来就是重头戏，以前手动打包是webpack入口文件 目标文件，现在变得简单，只需要webpack即可，图示如下

直接执行webpack命令

是不是很方便了，接下来会发现目标文件已经生成，index.html可以运行（重复12、13步骤）

15、通过pageage.json进行打包【第三种】

类似于第二种打包方式，只需要在pageage.json文件中的scripts中添加start属性，并设置它的值为webpack，即使用npm start命令就等价于webpack命令。

添加脚本start

npm start ，执行脚本

        标准写法应该是npm run start

        npm run start指向webpack命令（前提是配好webpack.config.js）

16、生成source map

Webpack在打包时可以为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。配置时在webpack.config.js下添加devtool配置项，其可选内容如下：

devtool选项                             配置结果

source-map ：                               在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；

cheap-module-source-map：        在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；

eval-source-map：                            使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；

cheap-module-eval-source-map：        这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

添加map生成规则

打包带map的文件

        打包并生成source map

17、使用webpack构建本地服务器（也可以使用anywhere）

如果使用过Nodejs或者vue脚手架，那你应该很明白构建本地服务器是什么意思，如果不知道，我们也可以基于nodejs构建一个webpack的本地服务器。

首先先安装webpack-dev-server组件

npm install --save-dev webpack-dev-server

如果抛警告说需要repository字段，可以在pageage.json中对应添加上去，"repository": {"type": "git","url": "http://baidu.com"}  

不过我们这个是私有项目，直接添加private配置项，并设置其值为布尔值true即可

安装完成

打开node_modules文件夹，可以看到已经下载完成

接下来在webpack.config.js配置服务信息

设置监听端口、路径和模式

添加devServer配置项

启动服务（直接启动方式）

webpack-dev-server --inline  

启动的命令有很多，这里介绍简单的webpack-dev-server --inline

停止服务时ctrl+c即可

启动服务（npm方式）

除了输入原始命令行，我们也可以自定义命令。先在pageage.json中做一下修改即可

添加server脚本

如果已经启动服务，先停止服务（ctrl+c）

npm run server

npm run server

和直接启动服务效果一样

查看效果

通过配置我们知道，服务监听的端口是8080，资源为项目根目录下的public文件夹，在浏览器中输入http://127.0.0.1:8080/

http://127.0.0.1:8080/

18、安装并使用Loaders

使用不同的loader，webpack就可以对对应的文件进行转换。先介绍如何进行json转换。

和webpack-dev-server一样，我们要安装json-loader

json加载器

查看文件，安装完成

在webpack.config.js下配置模块信息

webpack.config.js配置json文件的加载器

添加module配置项，并添加模块loaders（注意loaders是一个数组，可以添加多个loader）

新建json文件

既然是json-loader，那么就需要有源json文件被处理，我们可以把Greeter.js里面的文本信息提取出来

新建welcome.json文件，专门放信息

welcome.json

修改Greeter.js

修改后的Greeter.js

至此，json-load安装配置完成，接下来打包项目并启动服务

打包带json的js包

打包并启动服务

显示效果