Webpack 配置文件 webpack.config.js 核心参数详解

Webpack 配置文件概述

webpack.config.js 文件通常位于项目根目录，它是一个遵循 CommonJS 规范的 Node.js 模块。

var webpack = require('webpack');
module.exports = {
 entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'
 ],
 output: {
  path: './build',
  filename: 'bundle.js'
 },
 module: {
  loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude:  /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
  ]
 },
 resolve:{
  extensions:['','.js','.json']
 },
 plugins: [
  new webpack.NoErrorsPlugin()
 ]
};

入口配置：entry

1. entry（入口）

entry 配置项可以接受字符串、数组或对象类型。

当 entry 为字符串时，用于指定单一的入口文件路径：

entry: './js/main.js'

当 entry 为数组时，除了包含入口 JS 文件外，还可以配置 webpack-dev-server 提供的静态资源服务器选项。webpack-dev-server 会监控项目文件变化，实时重新构建并自动刷新页面：

entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'

当 entry 为对象时，可以将不同文件构建为独立的 bundle，实现按需加载。例如在 hello 页面中只需引入 hello.js：

 entry: {
  hello: './js/hello.js',
  form: './js/form.js'
 }

输出配置：output

2. output（输出）

output 配置项是一个对象，用于定义构建后文件的输出目录和文件名，主要包含 path 和 filename 属性：

 output: {
  path: './build',
  filename: 'bundle.js'
 }

如果在 entry 中定义了多个入口文件，可以将 filename 修改为 [name].js，以便根据入口名称动态生成对应的输出文件名。

模块加载：module.loaders

3. module（模块）

模块加载配置定义在 module.loaders 中。通过正则表达式匹配不同后缀的文件，并分配相应的加载器。例如，为 less 文件配置串联的三个加载器（使用 ! 定义级联关系）：

module: {
 loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
 ]
}

此外，可以添加配置来处理 png、jpg 等图片资源。当图片大小小于 10k 时，自动将其转换为 base64 编码：

{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}

为 CSS、Less 和图片添加 loader 后，不仅可以像 Node.js 中那样 require JS 文件，还可以直接 require CSS、Less 甚至图片文件：

 require('./bootstrap.css');
 require('./myapp.less');
 var img = document.createElement('img');
 img.src = require('./glyph.png');

需要注意的是，通过 require 引入的文件默认会内联到 JS bundle 中。如果希望保留 require 写法但将 CSS 文件单独提取出来，可以使用 extract-text-webpack-plugin 插件。

在上述示例代码配置的第一个 loaders 中，可以看到一个名为 react-hot 的加载器。由于项目用于学习 React，因此配置了 react-hot-loader 以实现 React 组件的热替换（Hot Module Replacement）。在 entry 参数中已配置 webpack/hot/only-dev-server，只需在启动 webpack 开发服务器时添加 --hot 参数，即可启用 react-hot-loader。在 package.json 文件中定义如下：

"scripts": {
  "start": "webpack-dev-server --hot --progress --colors",
  "build": "webpack --progress --colors"
 }

文件解析：resolve

4. resolve（解析）

Webpack 在构建包时会按目录查找文件。resolve 属性中的 extensions 数组用于配置程序可以自行补全的文件后缀：

 resolve:{
  extensions:['','.js','.json']
 }

配置完成后，加载 JS 文件时只需 require('common')，Webpack 会自动解析为 common.js。

外部依赖：externals

6. externals（外部扩展）

当项目中需要 require 某些类库或 API，但不希望其源码被打包到运行时文件中时，可以通过配置 externals 参数来解决：

 externals: {
  "jquery": "jQuery"
 }

配置后，即可在项目中使用这些 API，例如：var jQuery = require(“jquery”);

模块上下文：context

7. context（上下文）

当在 require 模块时包含变量，例如：

require("./mods/" + name + ".js");

编译时无法确定具体模块。此时，Webpack 会进行以下分析：

1. 分析目录：'./mods'；

2. 提取正则表达式：'/^.*.js$/'；

为了更好地配合 Webpack 编译，可以为其指定路径，如在 cake-webpack-config 中的做法（此处忽略 abcoption 的作用）：

 var currentBase = process.cwd();
 var context = abcOptions.options.context ? abcOptions.options.context : 
 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

以上关于 webpack.config.js 参数的详解内容分享完毕，希望能对读者有所帮助。