webpack认识

1 webpack是什么？

CommonJS和AMD是用于JavaScript模块管理的两大规范，前者定义的是模块的同步加载，主要用于NodeJS；而后者则是异步加载，通过requirejs等工具适用于前端。随着npm成为主流的JavaScript组件发布平台，越来越多的前端项目也依赖于npm上的项目，或者 自身就会发布到npm平台。因此，让前端项目更方便的使用npm上的资源成为一大需求。

web开发中常用到的静态资源主要有JavaScript、CSS、图片、Jade等文件，webpack中将静态资源文件称之为模块。 webpack是一个module bundler(模块打包工具)，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。Webpack对它们进行统 一的管理以及打包发布.

2 为什么使用 webpack？

1. 对 CommonJS 、 AMD 、ES6的语法做了兼容

2. 对js、css、图片等资源文件都支持打包

3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持

4. 有独立的配置文件webpack.config.js

5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间

6. 支持 SourceUrls 和 SourceMaps，易于调试

7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活

8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

3 webpack使用引导

3.1创建目录结构

3.2引入webpack依赖文件

在项目根目录打开命令窗口引入项目依赖，全局安装

npm  install  webpack  -g // 全局安装webpack

3.3 创建配置文件

在项目根目录创建三个或多个webpack配置文件

（1）webpack.base.config.js  //公用的配置放在这里面（可通过插件继承）

（2）webpack.develop.config.js  //开发环境中用到的配置文件

（3）webpack.publish.config.js   //生产环境中用到的配置文件

3.4 修改配置文件

// 这是最基本的一个配置文件

// 编写配置文件，要有最基本的文件入口和输出文件配置信息等

// 里面还可以加loader和各种插件配置使用

var path = require('path');

module.exports = {
    entry:path.resolve(__dirname,'src/js/app.js'),
    output: {
        path: path.resolve(__dirname, 'deploy'),
        filename: 'bundle.js',
    },
}

　　详细参见：

http://webpack.github.io/docs/configuration.html

3.5 运行webpack

1、通过配置文件运行（通用）

（1）在根目录运行webpack的命令，默认会去查找名称为webpack.config.js的文件执行，如果没有就会报配置信息没有配置的错误。

Webpack

（2）这时候我们可以通过运行下面的命令进行配置文件的选择

webpack –-config  webpack.develop.config.js

2、通过cli命令运行（了解）

（1）webpack的cli也提供了命令可以进行运行，例如：

Webpack  -watch       // webpack的监视命令，文件发生变化自动编译

webpack --entry ./entry.js --output-path dist --output-file bundle.js

//配置文件的启动目录和输出目录

webpack 最基本的启动webpack命令

webpack -w 提供watch方法，实时进行打包更新

webpack -p 对打包后的文件进行压缩

webpack -d 提供SourceMaps，方便调试

webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤

webpack --profile 输出性能数据，可以看到每一步的耗时

webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

webpack --display-error-details 方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。

（2）你可以运行webpack  -h查看webpack的其他命令，自行了解，或者通过英文官网了解webpack Cli部分

3、作为nodejs的api运行（了解）

var webpack = require('webpack');

webpack({

//configuration

}, function(err, stats){});

4 注意 但是我们基本上不用这种直接提供的命令，因为我们需要手动敲打很多字母，我们现在开发通用的方法都是使用配置文件的方式运行

3.6 把运行命令配置到npm的script中

1 为什么要用npm的script

(1)、npm 是一个非常好用的用来编译的指令，通过 npm 你可以不用去担心项目中使用了什么技术，你只要调用这个指令就可以了，只要你在 package.json 中设置 scripts 的值就可以了。

(2)、真正开发的时候你的webpack的命令会敲很长，因为有很多命令需要设置，即便你用了配置文件的方式，但一些--colors  --hot这些命令是没法在配置文件中配置的。比如：

webpack-dev-server --devtool eval --progress --colors --hot --content-base build

所以你不可能每次都敲这么长，因而我们就把这一大串配置到npm中

2 npm的script的使用

（1）、你首先需要安装webpack，这时候不全局安装

npm i webpack --save

（2）、配置npm的package.json文件中

"scripts": {
  	"test": "echo \"Error: no test specified\" && exit 1",
  	"develop": "webpack --config webpack.develop.config.js",
  	"publish": "webpack --config webpack.publish.config.js"
},

（3）、在根目录打开的命令窗口运行

npm  run  develop