webpack分享
基本概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
模块
- 在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。
- 每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
- Node.js 从最一开始就支持模块化编程。然而，在 web，模块化的支持正缓慢到来。在 web 存在多种支持 JavaScript 模块化的工具，这些工具各有优势和限制。webpack 基于从这些系统获得的经验教训，并将模块的概念应用于项目中的任何文件。
webpack 模块
对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：
- ES2015 import 语句
- CommonJS require() 语句
- AMD define 和 require 语句
- css/sass/less 文件中的 @import 语句
- 样式(url(...))或 HTML 文件img标签中的图片链接(image url)
核心概念
- 入口(entry)
- 输出(output)
- loader
为什么需要loader? 因为webpack自身只处理JavaScript，不是js的东西需要先经过loader转换成js - 插件(plugins)
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
常用的插件列表:- webpack.optimize.CommonsChunkPlugin
通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。 - extract-text-webpack-plugin
它会将所有的 入口chunk (entry chunks) 中的 require("style.css") 移动到分开的 css 文件。因此，你的样式不再内联到 javascript 里面，但会放到一个单独的 css 包文件 (styles.css)当中。 如果你的样式文件大小较大，这会更快，因为样式文件会跟 javascript 包并行加载。 - html-webpack-plugin
生成一个html文件 - webpack.HotModuleReplacementPlugin
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。 - open-browser-webpack-plugin
自动打开网页 - webpack.DefinePlugin
允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用 - webpack.optimize.UglifyJsPlugin
压缩代码 - zip-webpack-plugin
生成压缩文件
- webpack.optimize.CommonsChunkPlugin
总结
Webpack在启动后会从Entry里配置的Module开始，递归解析Entry依赖的所有Module。每找到一个Module，就会根据Loader去找出对应的转换规则，对Module进行转换后，再解析出当前Module依赖的Module。这些模块会以Entry为单位进行分组，一个Entry以及其所有依赖的Module被分到一个组也就是一个Chunk。最后，Webpack会将所有的Chunk转换成文件输出，在整个流程中，Webpack会在恰当的时机执行Plugin里的逻辑。
entry
entry可以是 string, array, object
entry: './app/entry'
entry: ['./app/entry1', './app/entry2']
entry: {
entry1: './app/entry1',
entry2: './app/entry2',
}
生成的chunk名称：string和array，生成的Chunk的名称为main.js，object为键值对中的键名。
output
output: {
//输出文件名称，如果有多个entry时可以根据内置的变量去动态生成，例如 '[name].js'，提供的变量有id(chunk的唯一标识，从0开始)，name(chunk的名称)，hash(chunk的唯一标识的Hash值)，chunkhash(chunk内容的Hash值)，hash和chunkhash可以指定长度，例如[hash:8]代表8位Hash值，ExtractTextWebpackPlugin使用contenthash而不是chunkhash来代表Hash值，原因是因为，该插件提取出的内容是代码本身，并不是由一组模块组成的chunk。
filename: '[name]-[hash]-bundle.js',
//配置输出文件存放在本地的目录，必须为string的绝对路径，一般使用node的path模块
path: path.resolve(__dirname, 'dist'),
//配置发布到线上的资源URL前缀
publicPath: 'https://cdn.example.com/assets/',
}
module
module: {
//配置模块读取和解析规则，类型为数组
rules: [{
//匹配规则
test: /\.(js|jsx)$/,
//指定包含的目录
include: path.resolve(__dirname, 'src'),
//指定排除的目录
exclude: path.resolve(__dirname, 'node_modules'),
use: ['babel-loader'],
//重置顺序，pre放置最前，post放置最后
enfore: 'pre',
}],
//让webpack忽略没有采用模块化的文件递归解析，（主要针对一些本身庞大但又没有采用模块化的库，例如jQuery、ChartJS)，支持正则表达式和函数
noParse: /jquery|chartjs/,
//parse可以指定哪些模块的语法被解析，哪些不被解析，可以精确到语法层面，并非文件层面（区别于noParse）
parse: {
amd: false, //禁用AMD
commonjs: false, //禁用commonjs
},
//webpack在启动后会从入口模块出发找到所有依赖模块，我们可以根据需要修改修改匹配规则
resolve: {
//别名
alias: {
mobx: `${__dirname}/node_module/mobx`
},
//有的第三方模块会针对不同的环境提供几份代码，一般会放在package,json下，webpack会根据mainFields的配置去决定优先采用哪部分的代码。
mainFields: ['browser', 'main'],
//在导入语句没有添加后缀名时，会根据配置尝试添加后缀名查找文件，默认配置如下，例如require('./data')，会先去查找data.js找不到，再去找data.json
extensions: ['.js', '.json'],
//modules 配置webpack去哪些目录下寻找第三方模块，默认只会去node_modules模块下查找，也可以支持扩展
modules: ['./src/components', 'node_modules'],
//配置为true时，所有的导入语句都必须添加后缀。
enforceExtension: true,
//配置node_modules下的导入语句是否需要添加后缀，一般配合enforceExtension使用，因为很多第三方模块导入语句不会添加后缀，为了避免错误，在enforceExtension设为true时，需要将enforceModuleExtension设为false
enforceModuleExtension: false,
}
}
plugin
plugin用于扩展Webpack的功能，数组中的每一项都是一个要使用的plugin的实例，几乎所有webpack无法直接实现的所有功能都可以在社区中找到plugin去解决。
plugin: [{
new Plugin({
//插件配置项
})
}]
devServer
devServer: {
//启用模块热替换功能，配合插件 new webpack.HotModuleReplacementPlugin()使用,
hot: true,
//DevServer的实时预览功能依赖一个注入页面里的代理客户端，inline用于配置是否将这个代理客户端自动注入将运行在页面的Chunk里，默认自动注入。开启inline，devserver会在构建变化后的代码时通过代理客户端控制页面刷新。如果不开启，会以iframe的方式去运行要开发的网页，构建完变化的代码时，会通过刷新iframe来实现实时预览
inline: true,
//指定访问请求返回的文件
historyApiFallback: {
rewrites: [{
from: /^\/user/,
to: '/user.html'
}]
},
proxy: {
'/h5/*': {
target: 'http://localhost:7601',
pathRewrite: function (path) {
return path.replace('/h5/api', '/h5');
}
},
},
//在http响应中注入响应头
header: {
'X-foo': 'bar'
},
//配置devserver服务监听的地址，默认本地，如果想要局域网内的其他设备访问，可以将host配置为 0.0.0.0
host: '127.0.0.1',
port: '8080',
//配置是否关闭DNS绑定后的http请求的Host检查，一般配合host:0.0.0.0使用，可以让其他设备通过ip地址访问。
disableHostCheck: false,
//使用https协议，devserver会自动生成一份https证书
https: true,
//配置控制台输出的日志等('none', 'error', 'warning', 'info')
clientLogLevel: 'error',
//配置是否启用Gzip压缩，默认不启用
compress: true,
//构建完毕使用默认浏览器自动打开网页
open: true,
}
