什么是 webpack？
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。
你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Boostrap 和 Redux。
webpack的官网是 http://webpack.github.io/ ，文档地址是 http://webpack.github.io/docs/ ，想对其进行更详细了解的可以点进去瞧一瞧。
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更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件
