webpack初探 -

Posted 2021-01-06 Aaron-攻城狮

什么webpack

webpack是一个模块打包器。webpack把模块连同它的依赖一起打包生成包含这些模块的静态资源。

安装

在使用webpack时，建议不要把webpack安装到全局，如果多个项目同时使用webpack的时，很有可能会导致因为版本的不同会导致冲突。

这里主要说的的webpack 3.0+版本。

安装方法

npm install webpack webpack-cli --save-dev

webpack 核心概念

1. Entry:入口，在webpack执行构建的第一步将从Entry开始，可抽象输入。
2. Module：模块，在webpack里一切皆是模块，一个模块对应一个文件，webpack会从配置的Entry开始递归找出所有依赖的模块。
3. Chunk:代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。
4. Loader:模块转换器，用于将模块的原内容按照需求转换成新内容。
5. Plugin:扩展插件，在webpack构建流程中的特定时间注入扩展逻辑，来改变构建结果或做我们想要做的事情。
6. 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的配置有关。

1. 如果entry是一个String或Array，就只会生成一个Array，就只会生成一个Chunk，这时Chunk的名称是main。
2. 如果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的属性可以取以下值：

1. anonymous（默认），在加载此脚本资源时不会带上用户的Cookies。
2. 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是字符串的枚举类型。

可选值有：

1. umd
2. umd2
3. commonjs2
4. common
5. amd
6. this
7. var
8. assign
9. window
10. global
11. 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"),
    }
}