什么webpack
webpack是一个模块打包器。webpack把模块连同它的依赖一起打包生成包含这些模块的静态资源。
安装
在使用webpack时，建议不要把webpack安装到全局，如果多个项目同时使用webpack的时，很有可能会导致因为版本的不同会导致冲突。
这里主要说的的webpack 3.0+版本。
安装方法
npm install webpack webpack-cli --save-dev
webpack 核心概念
- Entry:入口，在
webpack执行构建的第一步将从Entry开始，可抽象输入。 - Module：模块，在
webpack里一切皆是模块，一个模块对应一个文件，webpack会从配置的Entry开始递归找出所有依赖的模块。 - Chunk:代码块，一个
Chunk由多个模块组合而成，用于代码合并与分割。 - Loader:模块转换器，用于将模块的原内容按照需求转换成新内容。
- Plugin:扩展插件，在
webpack构建流程中的特定时间注入扩展逻辑，来改变构建结果或做我们想要做的事情。 - Output:输出结果,在
webpack结果一系列处理并得出最终想要的代码后输出结果。
配置
context
webpack在寻找相对路径的文件时会以context为根目录，context执行启动webpack时默认为所在的当前工作目录。
context必须是绝对路径。
const path = require(‘path‘);module.exports = { ???context: __dirname}Entry
entry是配置模块的入口，webpack执行构建的第一步从entry开始。
entry类型可以是以下三种中的一种或者互相组合。
const path = require(‘path‘);module.exports = { ???// 第一种 ???// 入口模块的文件路径，可以是相对路径 ???entry:"./main.js", ???// 第二种 ???// 入口模块的文件路径，可以使相对路径 ???entry:[‘./app/entry1‘,‘./app/entry2‘] ???// 第三种 ???// 配置多个入口，每个入口生成一个chunk ???entry:{ ???????a:‘./app/entry-a‘, ???????b:[‘./app/entry-b1‘,‘./app/entry-b2‘] ???}}如果是array类型，则搭配output.library配置项使用时，只有数组里的最后一个入口文件的模块会被导出。
# chunk
webpack会为每个生成的chunk取一个名称，chunk的名称和entry的配置有关。
- 如果
entry是一个String或Array，就只会生成一个Array，就只会生成一个Chunk，这时Chunk的名称是main。 - 如果
Entry是一个object，就可以能会出现多个Chunk，这时Chunk的名称是Object键值对中键的名称
Chunk包含信息如下
变量名 含义
id chunk的唯一标识，从0开始
name chunk名称
hash chunk的唯一标识的hash值
chunkhash chunk内容的hash值
# 配置动态Entry
如果一个项目里面需要配置多个页面，然而又需要为这些页面分别配置一个entry入口，但是这些页面的数量可能会不断的增长，这时entry的配置会受到其他因素的影响，导致不能写成静态的值。
const path = require(‘path‘);module.exports = { ???// 同步函数 ???entry:() => { ???????return { ???????????a:‘./pages/a‘, ???????????b:‘./pages/b‘ ???????} ???}, ???// 异步函数 ???entry:() => { ???????return new Promise((resolve) => { ???????????resolve({ ???????????????a:‘./pages/a‘, ???????????????b:‘./pages/b‘ ???????????}) ???????}) ???}}output
output配置如何输出最终想要的代码。output是一个object，里面包含一系列的配置项。
# filename
output.filename配置输出文件的名称，为string类型。如果只输出一个文件，则可以将它写成静态不变的。
但是有多个Chunk要输出时，就需要借助模板和变量，webpack会为每个Chunk取一个name，所以我们可以根据Chunk的名称来区分输出的文件名。
const path = require(‘path‘);module.exports = { ???output:{ ???????// 单个文件 ???????filename:"index.js", ???????// 多个文件 ???????filename:"[name]_[hash:8].js"， ???????// 根据文件内容的hash值生成文件名，用来浏览器长期缓存文件 ???????filename:"[chunkhash].js" ???}}hash和chunkhash的长度是可指定的，[hash:8]代表取8位hash值作为文件名称。
name代表Chunk内置的name去替换掉[name]，每个要输出的Chunk都会通过这个函数去拼接输出的文件名称。
# chunkFilename
output.chunkFilename是用来配置当无入口文件时输出的文件名称。chunkFilename只用于指定在运行过程中生成的Chunk在输出时的文件名称。
const path = require(‘path‘);module.exports = { ???output:{ ???????// 附加chunk的文件名称 ???????chunkFilename:"[id].js"， ???????chunkFilename:"[chunkhash].js" ???}}# path
output.path配置输出文件存放在本地的目录，必须是String类型的绝对路径。通常通过Node的path模块去获取绝对路径。
const path = require(‘path‘);module.exports = { ???output:{ ??????path:path.resolve(__dirname,"./dist") ???}}注意：第二个参数为最终输出到的文件名，如果文件名不存在，则会自行创建一个同名的文件夹，并把导出的文件放到该文件夹里面。
# publicPath
output.publicPath配置发布到线上资源需的URL前缀，为string类型。默认值是空字符串。
const path = require(‘path‘);module.exports = { ???output:{ ???????// 放到CDN上 ???????publicPath:‘https://cdn.example.com‘, ???????// 放到指定目录下 ???????publicPath:"/assets/", ???????// 放到根目录下 ???????publicPath:"" ???}}output.path和output.publicPath都支持字符串模板，内置变量只有hash一个，代表一次编译操作的hash的值。
# crossOriginLoading
output.crossOriginLoading用于配置异步插入的标签的crossorigin值。
script标签的crossorigin的属性可以取以下值：
anonymous（默认），在加载此脚本资源时不会带上用户的Cookies。use-credentials，在加载此脚本资源时会带上用户的Cookies。
const path = require(‘path‘);module.exports = { ???output:{ ???????// 异步加载资源使用方式 ???????// 1.带有Cookies ???????crossOriginLoading:"anonymous", ???????// 2.不带Cookies ???????crossOriginLoading:"use-credentials" ???}}# libraryTarget和library
使用webpack去构建一个可以被其他模块导入的库时需要使用到libraryTarget和library。
output.libraryTarget配置以何种方式导出库。
output.library配置导出库的名称。
他们通常搭配在一起使用。
output.libraryTarget是字符串的枚举类型。
可选值有：
- umd
- umd2
- commonjs2
- common
- amd
- this
- var
- assign
- window
- global
- jsonp
const path = require(‘path‘);module.exports = { ???output:{ ???????// 导出库名称，为String类型 ???????// 不填写时，默认的输出格式是匿名的立即执行函数 ???????library:"myLibrary", ???????// 导出库的类型，为枚举类型，默认为var ???????libraryTarget:"umd" ???}}# libraryExport
output.libraryExport配置要导出的模块中那些子模块需要被导出。只有output.libraryTarget被设置成commonjs或者commonjs2的时候才有效。
const path = require(‘path‘);module.exports = { ???output:{ ???????libraryExport:[‘a‘,‘b‘] ???}}lib_code是指导出库的代码内容，是有返回值的一个自执行函数。
整体配置
在进行配置的时候并不是所有的参数都要填写，而是需用用到哪些就填写哪些参数，总而言之就是根据自己的业务需求去定制自己需要的配置。
const path = require(‘path‘);module.exports = { ???context:__dirname, ???entry:"./main.js", ???output:{ ???????filename:"[chunkhash].js", ???????path:path.resolve(__dirname,"./dist"), ???}}webpack初探 - (一)
原文地址：https://www.cnblogs.com/aaron---blog/p/9661489.html