Webpack 2 新手教程：从初始配置到模块打包实战

Webpack 简介与核心功能

Webpack 已成为现代 Web 开发中不可或缺的核心工具。作为一款 JavaScript 模块打包器，它不仅能处理 JS 代码，还能转换 HTML、CSS 甚至图片等所有前端资源。通过 Webpack，开发者可以更精细地控制应用产生的 HTTP 请求数量，并引入如 Jade、Sass 和 ES6 等高级特性。此外，它还能无缝对接 npm，方便地下载和管理第三方包。

本文专为刚接触 Webpack 的开发者编写，旨在系统介绍初始设置与配置、模块机制、加载器、插件应用、代码分割以及热模块替换（HMR）等关键内容。

在深入下文之前，请确保您的计算机已正确安装 Node.js 环境。

初始配置与项目搭建

初始配置

首先，使用 npm 初始化一个新项目并安装 Webpack：


mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack@beta --save-dev
mkdir src
touch index.html src/app.js webpack.config.js

接下来，创建以下基础文件结构：


<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Hello webpack</title>
 </head>
 <body>
  <div id="root"></div>
  <script src="dist/bundle.js"></script>
 </body>
</html>


// src/app.js
const root = document.querySelector('#root')
root.innerHTML = `<p>Hello webpack.</p>`


// webpack.config.js
const webpack = require('webpack')
const path = require('path')

const config = {
 context: path.resolve(__dirname, 'src'),
 entry: './app.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js'
 },
 module: {
  rules: [{
   test: /\.js$/,
   include: path.resolve(__dirname, 'src'),
   use: [{
    loader: 'babel-loader',
    options: {
     presets: [
      ['es2015', { modules: false }]
     ]
    }
   }]
  }]
 }
}

module.exports = config

上述配置是一个通用的起点，它指示 Webpack 将入口文件 src/app.js 编译并输出到文件 /dist/bundle.js 中，同时使用 Babel 将所有 .js 文件从 ES2015 标准转换为 ES5，以确保兼容性。

为了实现向 ES5 格式的转换，我们需要安装三个核心包：babel-core、Webpack 加载器 babel-loader 以及预置包 babel-preset-es2015。同时，使用 { modules: false } 配置可以启用 Tree Shaking 功能，从打包文件中移除未使用的导出项（exports），从而有效减小文件大小。


npm install babel-core babel-loader babel-preset-es2015 --save-dev

最后，请用以下内容替换 package.json 中的 scripts 部分：


"scripts": {
 "start": "webpack --watch",
 "build": "webpack -p"
},

在命令行中执行 npm start 将以监视模式启动 Webpack。当 src 目录下的 .js 文件发生更改时，它将自动重新编译 bundle.js。请注意控制台输出的打包文件数量和大小，这是评估构建效果的重要指标。

Webpack 简介与核心功能

现在，当您在浏览器中加载 index.html 页面时，应该能看到 "Hello webpack." 的输出结果。

open index.html

打开 dist/bundle.js 文件，查看 Webpack 的具体处理过程。文件顶部是 Webpack 的模块引导代码，底部则是我们的业务模块。此时您可能对打包机制尚无深刻印象，但您可以开始编写 ES6 模块，Webpack 将生成兼容所有浏览器的打包文件。

使用 Ctrl + C 停止 Webpack 进程，然后运行 npm run build 以生产模式编译我们的 bundle.js。

请注意，打包文件的大小已从 2.61 kB 显著减少至 585 字节。再次查看 dist/bundle.js 文件，您会发现大量代码已被压缩变得难以阅读，这是因为我们使用了 UglifyJS 进行压缩。这样，我们可以用更少的代码实现与之前相同的功能效果。

模块处理与导入机制

模块

优秀的 Webpack 能够识别多种格式的 JavaScript 模块，其中最著名的两种是：

ES2015 import 语句
CommonJS require() 语句

我们可以通过安装并导入 lodash 来测试这些格式的模块。


npm install lodash --save


// src/app.js
import {groupBy} from 'lodash/collection'

const people = [{
 manager: 'Jen',
 name: 'Bob'
}, {
 manager: 'Jen',
 name: 'Sue'
}, {
 manager: 'Bob',
 name: 'Shirley'
}, {
 manager: 'Bob',
 name: 'Terrence'
}]
const managerGroups = groupBy(people, 'manager')

const root = document.querySelector('#root')
root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`

运行 npm start 启动 Webpack 并刷新 index.html，您将看到一个按 manager 分组的数组显示在页面上。

接下来，让我们将这个数组提取到它自己的模块 people.js 中。


// src/people.js
const people = [{
 manager: 'Jen',
 name: 'Bob'
}, {
 manager: 'Jen',
 name: 'Sue'
}, {
 manager: 'Bob',
 name: 'Shirley'
}, {
 manager: 'Bob',
 name: 'Terrence'
}]

export default people

我们可以在 app.js 中使用相对路径轻松导入该模块。


// src/app.js
import {groupBy} from 'lodash/collection'
import people from './people'

const managerGroups = groupBy(people, 'manager')

const root = document.querySelector('#root')
root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`

注意：像 lodash/collection 这样没有相对路径的导入语句，表示导入的是安装在 /node_modules 目录下的模块；而您自己的模块则需要使用类似 ./people 的相对路径，借此可以清晰地区分两者。

加载器配置与 Sass 处理

加载器

前文已介绍，您可以通过配置像 babel-loader 这样的加载器，来告知 Webpack 在遇到不同文件类型的导入时该如何处理。您可以组合多个加载器，以应对多种文件转换需求。例如，在 JS 中导入 .sass 文件就是一个典型的例子。

Sass

这种转换过程涉及三个独立的加载器和 node-sass 库：


npm install css-loader style-loader sass-loader node-sass --save-dev

请在配置文件中为 .scss 文件添加新的处理规则。


// webpack.config.js
rules: [{
 test: /\.scss$/,
 use: [
  'style-loader',
  'css-loader',
  'sass-loader'
 ]
}, {
 // ...
}]

注意：任何时候更改 webpack.config.js 中的任意加载规则后，都需要使用 Ctrl + C 和 npm start 重新启动构建过程。

加载器的处理序列是逆序执行的：

sass-loader 负责将 Sass 代码转换为 CSS。
css-loader 将 CSS 解析为 JavaScript 模块，并解析所有依赖关系。
style-loader 将我们的 CSS 输出并插入到文档中。

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

Webpack 2 新手入门指南：配置、模块与加载器详解

Webpack 简介与核心功能

初始配置与项目搭建

模块处理与导入机制

加载器配置与 Sass 处理

实用工具推荐