webpack模块加载器兼打包工具

1>基本介绍

在webpack中，一个css甚至一个字体都成为模块，彼此存在依赖关系，webpack就是处理模块间依赖关系的，并将它们进行打包。

各种文件格式通过特定的加载器loader编译后，最终统一生成为.js,.css,.png,.jpg等静态资源。

但是归根到底他就是有个.js的配置文件，一个构架好或者差都表现在这个配置文件中。

2>配置webpack

创建一个目录demo，npm初始化

npm init//完成后有package.json文件

本地局部安装webpack

npm install webpack --save-dev

接着安装webpack-dev-server，可以在开发环境提供很多服务，比如启动一个服务器，热更新，接口代理

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

写配置文件

在package.json中scripts里添加一个快速启动webpack-dev-server服务的脚本"dev":"webpack-dev-server --open --config webpack.config.js"

运行npm run dev的时候就会执行"webpack-dev-server --open --config webpack.config.js

其中config指向的是webpack-dev-server指向的文件路径。Open在执行时自动会在浏览器打开页面，默认地址是127.0.0.1:8080,不过ip，端口号都可以配置

3>webpack的四个核心概念：

入口(entry)、输出(output)、加载器（loader）、插件(plugins)

1》entry 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始,可以是单入口也可以是多入口

2》output 用来配置编译后的文件存储位置和文件名,只能有一个出口

output中有path选项用来存放打包后文件的输出目录，必填

filename用于指定输出文件的名称

publicePath指定文件引用的目录

3》loader 对模块源代码进行转换（webpack 本身只能处理Js模块）。

   module:{
 	   rules:[
 	      {
 	   	   test:/\.css$/,
 	    	use:[
 	   	       'style-loader',
 	   	       'css-loader'
 	     	]
 	     }
 	  ]
 }

在module对象的rules属性中可以指定一系列的loader，每一个loader都必须包括test，use两个选项。

上面代码的意思是：webpack编译过程中遇到require()或import语句导入一个后缀为.css的文件时，它将先通过css-loader转换，再通过style-loader转换，然后打包。

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

use 属性，表示进行转换时，应该使用哪个 loader。可以是字符串或者数组，数组从后面开始编译。

const webpack = require('webpack'); //访问 webpack 运行时(runtime)
 const configuration = require('./webpack.config.js');
  let compiler = webpack(configuration);
  compiler.apply(new webpack.ProgressPlugin());
  compiler.run(function(err, stats) {
    // ...
  });

​

4》Plugins：可以用来解决loader无法实现的其他事。外置插件要先npm安装，然后导入插件用require()

   extract-text-webpack-plugin插件可以把散落在各地的Css提取出来，并合成一个文件.

 //导入插件
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var config={
//...
 plugins:[
   //重命名提取后的css
   new ExtractTextPlugin('main.css')
 ]
};

webpack的优点如下：

1. webpack 遵循commonJS 的形式，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

2. 能被模块化的不仅仅是 JS ，所有的静态资源，例如css，图片等都能模块化，即以require的方式引入。

3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。 

webpack与gulp的区别

gulp合并后仍然是你写的代码，只是局部变量名被替换，一些语法做了转换而已，整体内容并没有发生改变。

Webpack打包后的代码已经不只是你写的代码，其中夹杂很多webpack自身的模块处理代码。

他们的定位是不同的。对gulp来说，他旨在规范前端开发流程。webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。