FAQ
note - webpack howto

webpack How To

https://webpack.js.org/guides/getting-started/ | 中文版

文章作者都是佛心來的！值得跪著讀

npm init -y

-y yes to all

npm i -D webpack

-D flag is the shortcut for: --save-dev

npm install new-package add and set new-package at webpack.config.js

目前 index.html 的相依資源，路徑是自己設定，需為 bundle 後的檔案路徑。另外有外部套件可以自動生成將 bundle 加到 html 中。

lodash http://blog.yuansc.com/2015/09/02/lodash%E7%AE%80%E4%BB%8B/ Lodash 是一个著名的 javascript 原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率,提高 JS 原生方法性能的 JS 库。 https://www.w3cplus.com/javascript/lodash-intro.html

https://doc.webpack-china.org/guides/asset-management

管理资源

资源：js, css, img, fonts, datas(json, xml...), ...

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等管理工具来处理资源，並将它们从 /src 文件夹移动到 /dist 或 /build (或其他 "輸出") 目录中。像 webpack 这样的工具，将「动态打包 (dynamically bundle)」所有依赖项（创建所谓的依赖图 (dependency graph) ）。现在每个模块都可以_明确表述它自身的依赖，我们将避免打包未使用的模块。

除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。 loader 会识别这是一个本地文件， e.g. 将 './my-image.png' 路径，替换为「输出目录」中图像的最终路径。 file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。

// index.js 
// import '開發中的相對路徑' // bundle 後會產生新的檔案，關聯的資源也一起轉換配置
import './style.css';
import Icon from './mstile.png';

https://doc.webpack-china.org/guides/output-management/

管理输出

HtmlWebpackPlugin 会默认生成 index.html 文件。所有的 bundle 会自动添加到 html 中。

清理 /dist 文件夹

clean-webpack-plugin

https://doc.webpack-china.org/guides/development/

开发

使用 source map

JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。不用 require()，在 webpack.config.js 設定 devtool 屬性。

使用 webpack-dev-server

不用 require()，在 webpack.config.js 設定 devServer 屬性。似乎預設是 localhost:8080 下建立服务，

使用 webpack-dev-middleware

webpack-dev-middleware 是一个容器 (wrapper)，它將發送 webpack 處理後的檔案到 server。在 webpack-dev-server 内部有使用它。

但它是可以作为一个单独的套件，可自定义設定来实现更多需求。下面是 webpack-dev-middleware 配合 express server (快速服務器) 的示例。

webpack.config.js 先設定一個 publicPath 路徑，它会在服务器脚本 (server.js) 用到，為了使文件资源能在 http://localhost:3000 被訪問

server.js

// server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

/* 告訴 express (app) 
以 webpack-dev-middleware 和 webpack.config.js (config) 配置文件作为基础。*/
app.use( webpackDevMiddleware( compiler, {
  publicPath: config.output.publicPath
}));

// 在 port 3000 提供服務
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

https://doc.webpack-china.org/guides/hot-module-replacement/

模块热替换

Hot Module Replacement 或 HMR 意思是它允许在运行时更新各种模块，而无需进行頁面的完全刷新。(像是 Hot Reload？)

模块热替换(Hot Module Replacement)

在 webpack HMR 功能之前，已经有很多 live reload 的工具或库，比如 live-server，这些库监控文件的变化，然后通知浏览器端刷新页面，那么我们为什么还需要 HMR 呢？ Webpack HMR 原理解析

启用 HMR

启用此功能实际上相当简单。而我们要做的，就是更新 webpack-dev-server 的配置：使用 webpack 内置的 HMR 插件：hot: true。我们还要删除掉 print.js 的入口起点，用 index.js 統一管理。

NamedModulesPlugin，容易查看要修补 (patch) ? 的依赖

index.js

// index.js

// 如果在 module.hot 被觸發
if (module.hot) {
// 接受 (accept) 给定依赖模块的更新，并触发一个 callback 来对这些更新做出响应。
// accept( '给定依赖模块', callback)
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
printMe();
})
}

模块热替换 (Hot Module Replacement) 支持方法

通过 Node.js API

dev-server.js

// dev-server.js

// 当使用 webpack dev server 和 Node.js API 时，
// 不要将 `devServer` 选项放在 webpack.config.js 的 module.exports 指向的物件中。
// 在创建选项时，将其作为第二个参数传递。
const options = {
  ...
};
new WebpackDevServer(compiler, options)

// 想要启用 HMR，还需要修改 webpack 配置对象，使其包含 HMR 入口起点。
// webpackDevServer 中有一个 addDevServerEntrypoints 的方法可实现。
webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(5000, 'localhost', () => {
  console.log('dev server listening on port 5000');
});

其他代码和框架

有许多其他 loader 和示例，可以自動支援 HMR 在各種框架或函式庫。

https://doc.webpack-china.org/guides/tree-shaking/

Tree Shaking

tree shaking 是一个术语，通常用于描述「移除 JavaScript 上下文中的未引用代码 (dead-code)」。 e.g. 在配置对象中添加一个 plugins，能删除未引用代码 (dead code) 的压缩工具 (minifier) -- UglifyJSPlugin

警告

webpack 本身并不会执行 tree-shaking，它需要依赖第三方工具。

结论

为了使用 tree shaking，你必须：

使用 ES2015 模块语法（即 import 和 export）。
引入一个能够删除 dead code 的 minifier（例如 UglifyJSPlugin）。

生产环境构建

开发环境 (development) 和生产环境 (production) 的构建目标差异很大。我们通常建议为每个环境编写彼此独立的 webpack 配置。遵循不重复原则(Don't repeat yourself - DRY)，保留一个“通用”配置。我们使用一个 webpack-merge 的工具在各环境特定 (environment-specific) 合併通用配置。

note - webpack howto