Webpack 基础配置与开发服务器详解

Webpack 基础与模块打包

一、Webpack基础配置概述

1. 在项目根目录执行 `npm init` 生成 `package.json`，按提示填写信息。尽管非强制，但强烈建议生成以管理项目依赖。

2. 安装Webpack环境

a. 全局安装Webpack：执行命令 `npm install webpack -g`。

b. 本地安装至项目并将依赖写入 `package.json` 的 `devDependencies`：进入项目根目录，执行 `npm install webpack --save-dev`。

3. 模块打包操作

使用命令 `webpack <entry> <output>`。

其中 `<entry>` 指定待打包的源文件，`<output>` 指定打包后的目标文件。

示例命令：`webpack app/index.js`

`build/build.js` 表示将 `app` 目录下的 `index.js` 打包输出至 `build` 目录下的 `build.js` 文件。

Webpack 配置文件核心配置项

二、Webpack配置文件常用配置项详解

1. Webpack默认读取项目根目录下的 `webpack.config.js` 配置文件，需手动创建。支持为同一项目配置多个文件以实现不同功能，具体设置方法后续介绍。

2. Webpack配置文件需导出一个配置对象，格式如下：

　　　　module.exports = {
　　　　　　//配置项
　　　　}

3. 接下来将详细说明常用配置项。

entry: 指定打包入口文件，类型为字符串或对象。 output: 配置打包结果，类型为对象。 fileName：定义输出文件名，字符串类型。 path：定义输出文件路径，字符串类型。 module: 定义模块处理逻辑，类型为对象。 loaders：定义加载器列表，数组类型。 [ { test: 正则表达式，用于匹配需处理的文件。 loader/loaders：字符串或数组，处理匹配文件。单一加载器使用 `loader: string`，多加载器使用 `loaders: array`。

include: 字符串或数组，指定包含的文件夹。 exclude: 字符串或数组，指定排除的文件夹。 } ] resolve: 影响模块解析，类型为对象。 extensions：自动补全识别后缀，数组类型。

plugins: 定义插件列表，数组类型。

4. entry配置详细说明

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

（2）当entry为对象时：

a. 若值为数组，用于将多个模块打包成一个模块。若模块间无依赖，数组顺序不限；若有依赖，应将依赖性最高的模块置于数组末尾。 例如：`entry:["./app/one.js",".app/two.js"]`

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

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

注：当entry为键值对对象时，包名由键名决定。此时output的filename不能为固定字符串，因为每个包的名称必须唯一。

5. output配置详细说明

（1）output是一个对象。

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

output:{
　　filename:"build.js"
　}

若输出多个文件，filename不能为固定字符串。需使用以下变量以赋予每个文件唯一名称：

[name] 被替换为chunk的名称，对应entry的键名。

[hash] 被替换为编译过程的哈希值。

[chunkhash] 被替换为chunk的哈希值。

如：

output:{

　　　　　　　　　　path:'./build/',

　　　　　　　　　　fialname:'[name].js'

}

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

（4）output中还有其他属性，此处未详述，可查阅Webpack官网获取更多信息。

6. module.loaders配置详细说明

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

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

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

（4）module除配置loaders外，还可配置其他属性，更多信息请参阅Webpack官网。

7. resolve.extensions配置详细说明

（1）resolve.extensions非必填项。若不配置，默认值为 `["", ".webpack.js", ".web.js", ".js"]`。手动设置值将覆盖默认值。

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

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

（4）resolve还有其他配置项，更多信息请参阅Webpack官网。

8. 补充说明

（1）配置好配置文件后，在命令行输入 `webpack` 即可按默认配置项打包模块。

（2）设置多个Webpack配置文件。默认配置文件为 `webpack.config.js`，命令行输入 `webpack` 时默认查找此文件。通过在 `package.json` 的 `scripts` 中添加配置，如 `"start-html":"webpack --config webpack.html.config.js"`，在命令行输入 `npm run start-html` 即可查找 `webpack.html.config.js`。通过此方式可实现不同配置文件的不同用途，避免反复修改同一配置文件。

9. 以下是一个简单的配置文件示例

module.exports = {
 entry:{
 one:"./app/one.js",
 two:"./app/two.js"
 },
 output:{
 path:"./build/",
 filename:"[name].js"
 },
 module:{
 loaders:[
 {
 test:/.*\.css$/,
 loaders:["style","css"],
 exclude:'./node_modules/'
 }
 ]
 },
 resolve:{
 extensions:['','.css','.js','jsx']
 }
}; 

webpack-dev-server 开发服务器配置

三、Webpack-Dev-Server配置

1. webpack-dev-server是一个轻量级服务器，修改源码后自动刷新页面以同步修改。

2. 安装webpack-dev-server： 全局安装：`npm install webpack-dev-server -g` 项目内安装并将依赖写入 `package.json`：`npm install webpack-dev-server --save-dev`

3. 使用命令 `webpack-dev-server --hot --inline` 完成自动刷新功能。

4. 默认端口号为8080。若端口被占用，需修改端口，例如 `webpack-dev-server --port 3000`（将端口改为3000）。

5. 安装webpack-dev-server后，命令行输入 `webpack-dev-server` 开启服务，浏览器地址栏输入 `localhost:端口号` 即可在浏览器中打开项目根目录的 `index.html`。若根目录无 `index.html`，浏览器将列出根目录下所有文件夹。

6. 仅启动服务无法自动刷新，需使用 `webpack-dev-server --hot --inline` 实现自动刷新。

7. 使用 `webpack-dev-server --hot --inline` 命令时，每次修改文件后，文件打包保存在内存中而未写入磁盘（默认依据 `webpack.config.js` 打包，可通过 `--config xxxx.js` 修改）。这种打包得到的文件与项目根目录中的 `index.html` 位于同一级（但在内存中不可见，未写入磁盘）。使用 `webpack` 命令可将打包后的文件保存至磁盘。

例如在 `index.html` 中引入通过 `webpack-dev-server --hot --inline` 打包的 `build.js`： `<script src="build.js"></script>`

在 `index.html` 中引入通过 `webpack` 命令打包的 `build.js`： `<script src="./build/build.js"></script>`

8. 为避免每次输入长命令，可在项目根目录 `package.json` 的 `scripts` 配置中添加配置，如 `"build":"webpack-dev-server --hot --inline"`，然后在命令行输入 `npm run build` 即可替代长命令（`webpack-dev-server --hot --inline`）。运行 `webpack-dev-server --hot --inline` 默认查找 `webpack.config.js`，通过 `--config` 命令可修改为其他配置文件。例如：

`webpack-dev-server --hot --inline --config 'webpack.es6.config.js'`

9. 配置根目录

（1）在命令行输入 `webpack-dev-server --hot --inline`，并在浏览器输入 `localhost：端口号` 时，浏览器会在项目根目录查找内容。通过 `--content-base` 可配置根目录。

如 `webpack-dev-server --hot --inline --content-base './build/'`，将在 `build` 文件夹中加载 `index.html`。若无 `index.html` 文件，浏览器将显示 `build` 目录下所有文件和文件夹。

配置文件示例

四、实例演示

本文设置了两个Webpack配置文件，分别为 `webpack.config.js` 和 `webpack.react.config.js`。`package.json` 文件中 `scripts` 对象内容如下：

　　"scripts": {
　　"test": "echo \"Error: no test specified\" && exit 1",
　　"react": "webpack --config webpack.react.config.js",
　　"build": "webpack-dev-server --hot --inline --content-base ./build/",
　　"build-react": "webpack-dev-server --hot --inline --content-base ./react-build/ --config webpack.react.config.js"
　　　　}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。