Webpack 配置文件与核心配置项详解

Webpack 安装步骤

1、安装webpack

首先进行全局安装，命令为：npm install webpack -g。若已配置cnpm镜像，可将npm替换为cnpm执行安装。

接着在项目根目录初始化项目，生成package.json文件以记录依赖插件，执行命令：npm init。

将webpack安装至项目本地，并将其写入package.json的devDependencies依赖项中。

具体命令行如下：npm install webpack --save-dev。

Webpack 配置文件基础

2、webpack配置文件介绍

Webpack需要配置文件webpack.config.js，需手动创建于项目根目录。一个项目可配置多个文件，各自承担不同功能。

Webpack配置文件的格式结构如下：

　　　　module.exports = {
　　　　　　//配置开始。主体
　　　　}

常用配置项概览

3.常用配置项简单说明

entry：指定打包的入口文件，类型可为字符串或对象。

output：配置打包后的输出结果，类型为对象。

fileName：定义输出文件的名称，类型为字符串。

path：定义输出文件的路径，类型为字符串。

module：定义模块的处理逻辑，类型为对象。

loaders：定义一系列加载器，类型为数组。

　[
　　　　　　　　　　{
　　　　　　　　　　　　test:正则表达式，用于匹配到的文件
　　　　　　　　　　　　loader/loaders：字符串或者数组，处理匹配到的文件。　　　　　　　　　　　　　　　
           //loader：string：只需要用到一个模块加载器
           //loaders：array：要使用多个模块加载器
　　　　　　　　　　　　include:字符串或者数组，指包含的文件夹
　　　　　　　　　　　　exclude：字符串或者数组，指排除的文件夹
　　　　　　　　　　}
　　　　　　　　]　　　　

resolve：影响模块的解析方式，类型为对象。

extensions：用于自动补全识别文件后缀，类型为数组。

plugins：定义使用的插件列表，类型为数组。

Entry 入口配置详解

4.entry的详细说明

1）当entry为字符串时，该字符串表示需打包模块的路径。若仅需打包单个模块，可采用此形式。

2）当entry为对象时：

a.若值为数组，用于将多个模块打包为一个模块。若模块间无依赖，数组顺序不限；若有依赖，应将依赖性最高的模块置于数组最后。

示例代码：entry:["./dome/one.js",".dome/two.js"]

b.若为键值对形式的对象，用于分别打包成多个模块。例如：

entry:{
　　　　　　　　module1:"./dome/one.js",
　　　　　　　　module2:["./dome/two.js","./dome/three.js"]　　　　　　}

注意：当entry为键值对对象时，包名即为键名。此时output的filename不能是固定字符串，因为每个包的名称必须不同。

Output 输出配置详解

5.output详细说明

1）output是一个对象。

2）output.filename：指定输出文件名，类型为字符串。若仅输出一个文件，filename为确定的字符串。

示例：

output:{
　　　　　　　　　　filename:"build.js"
　　　　　　　　　　　　}

当输出多个文件时，output.filename不能为固定字符串。为使每个文件拥有唯一名称，需使用变量占位符。

示例：

output:{
　　　　　　　　　　path:'./build/',
　　　　　　　　　　fialname:'[name]_bundle.js'
　　　　　　　　}

（3）output.path：指定输出文件路径，为相对路径字符串。

Loaders 加载器配置

6.module.loaders详细说明

1）module是对象，定义对模块的处理逻辑。

2）module.loaders是数组，定义一系列加载器，数组中每项均为对象。

配置结构如下：

module.loaders:[
　　　　　　　　{
　　　　　　　　　　test:正则表达式，用于匹配到的文件
　　　　　　　　　　loader/loaders：字符串或者数组，处理匹配到的文件。　　　　　　　　　　　　　　　
         //loader：string：只需要用到一个模块加载器
         //loaders：array：要使用多个模块加载器
　　　　　　　　　　include:字符串或者数组，指包含的文件夹
　　　　　　　　　　exclude：字符串或者数组，指排除的文件夹
　　　　　　　　}
　　　　　　]　　

（4）module除配置loaders外，还可配置其他值。更详细配置请移步webpack官网查阅。

Resolve 扩展名配置

7.resolve.extensions详细说明

1）resolve.extensions非必须配置。未配置时使用默认值["", ".webpack.js", ".web.js", ".js"]。手动设置值将覆盖默认值。

2）若希望每个模块按自身扩展名正确解析，需在数组中添加空字符串。

3）若请求js文件时不带扩展名（如：require('somecode')），需将'.js'加入数组。其他文件类型同理。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站!