webpack学习笔记（一）

以前的项目中一直在使用webpack打包react应用，可是接触到的并不深。最近没什么事情，正好来整理一下webpack的相关知识。

什么是webpack？

webpack和大多数的模块打包机不一样，它是将项目做为一个总体，而后经过一个给定的主文件，webpack将从这个主文件开始找到项目的全部依赖文件，并使用loaders来处理它们，最终打包成一个或多个浏览器可识别的js文件。

如何安装？

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

webpack就是咱们须要的模块打包机，webpack-dev-server用来建立本地服务器，用来监听代码的修改并自动刷新修改后的结果。

配置

1.Entry

entry是配置模块的入口，webpack执行构建的第一步将从入口开始查找及递归解析全部入口依赖的模块。

entry配置是必填的，若是不填将致使webpack报错退出。

Entry 类型

类型	例子	含义
字符串	‘./src/app.js’	入口模块的文件路径，能够是相对路径
对象	{app: './src/app.js', vendor: './src/vendor.js'}	适合于多个入口的配置，每一个入口会成生产一个chunk文件。能够经过将公共模块和应用模块分隔从而将公共模块进行缓存，避免对公共模块的单独打包；或者在多页面应用中，将不一样的页面单独打包
数组	[‘./src/main1.js’, ‘./src/main2.js’]	和字符串类型的entry相似，也能够是相对路径，适合于多主入口状况下，将多个主入口打包成一个chunk

2 Output

output配置如何输出最后的代码。output是一个object，包含如下一系列配置项：

path

path用来配置输出文件在本地存放的目录，必须为string类型的绝对目录，以下（使用Node.js的path去获取绝对路径）：

path: __dirname + '/dist'

publicPath

在复杂的项目里可能会有一些构建出的资源须要异步加载，加载这些异步资源须要对应的 URL 地址。

output.publicPath 配置发布到线上资源的 URL 前缀，为string 类型。 默认值是空字符串 ''，即便用相对路径。

这时在发布到线上的HTML在引入JavaScript文件的时候就须要：

<script src='https://cdn.example.com/assets/a_12345678.js'></script>

filename

output.filename配置输出文件的名称，为string类型。若是只有一个输入文件，能够写成以下：

filename: 'bundle.js'

若是有多个chunk须要输出，能够根据模板和变量来进行命名。webpack会对每一个chunk取名，根据chunk名取名以下：

filename: '[name].js'

 entry和output配置以下：

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
　　 //  使用publicPath的状况下
　　 publicPath: 'https://cdn.example.com/assets'
  }
};

内置变量除了name还有如下：

变量名	含义
id	Chunk 的惟一标识，从0开始
name	Chunk 的名称
hash	Chunk 的惟一标识的 Hash 值
chunkhash	Chunk 内容的 Hash 值

ChunkFilename

output.chunkFilename 配置无入口的 Chunk 在输出时的文件名称。 chunkFilename 和上面的 filename 很是相似，但 chunkFilename 只用于指定在运行过程当中生成的 Chunk 在输出时的文件名称。 常见的会在运行时生成 Chunk 场景有在使用 CommonChunkPlugin、使用 import('path/to/module') 动态加载等时。 chunkFilename 支持和 filename 一致的内置变量。