webpack 之 管理资源
上一篇笔记整理了整合JS资源的过程，现在我们尝试整合一些其他资源
在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。
同样的方式也被用于 JS 模块，但是像 webpack 这样的工具，将动态打包(dynamically bundle)所有依赖项(创建所谓的依赖图(dependency graph))。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，我们将避免打包未使用的模块。
webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建网站或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了这个设置过程。
安装以及加载 CSS
为了从 JS 模块中 import 一个 CSS 文件，需要在 module 配置中安装并添加 style-loader 和 css-loader
npm install --save-dev style-loader css-loader
并在 webpack.config.fs 文件中添加一个模块规则
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
// 文件中添加下面的代码
module: {
rules: [
{
// 每次遇到 require 或 import 时进行检测
test: /\.css$/,
// 如果是 .css 后缀的文件，则用下面两个 loader 去处理
use: [
'style-loader',
'css-loader'
]
}
]
}
};
webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。上面的这种情况，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。
这样就可以在依赖于此样式的文件中 import './style.css'。然后，当该模块运行时，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件中的 <head> 中。
我想如果理解了上篇 JS 整合的方法，这里应该也不难，如果你觉得应该看看详细的过程，请访问管理资源 | webpack
需要注意的是，多数情况下，也可以进行 CSS 分离，以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何你可以想到的 css 处理器风格 - postcss , sass 和 less 等。
加载图片
上述的过程做到了 CSS 的加载，但是我们的背景和图标这些图片要怎么去处理呢？这就要用到另一个 loader 了(file-loader)，可以通过它轻松地将这些内容混合到 CSS 中：
npm install --save-dev file-loader
当然我们同样要修改我们的 webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
当在 JS 文件中 import img from './img.png'，该图像将被处理并添加到 output 目录，并且 img 变量将包含该图像在处理后的最终 url。当使用 css-loader 时，如上所示，你的 CSS 中的 url('./img.png') 会使用类似的过程去处理。loader 会识别这是一个本地文件，并将 './img.png' 路径替换为 输出 目录中图像的最终路径。html-loader 以相同的方式处理 <img src="./img.png" />。
详细的过程，请访问 管理资源 | webpack
合乎逻辑的下一步是：压缩和优化你的图像。查阅
image-webpack-loader和url-loader，以了解更多关于增强加载处理图片功能。
加载字体
处理完了图像，那么像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接受并加载任何文件，然后将其输出到构建目录。
更新 webpack.config.js ，在 rules 里加入
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
然后再项目中添加一些字体文件 ./src/my-font.woff 或者 ./src/my-font.woff2
通过配置好 loader 并将字体文件放在合适的地方，可以通过一个 @font-face 声明引入。本地的 url(...) 指令会被 webpack 获取处理，跟处理图片资源一样。
src/style.css
@font-face {
font-family: 'MyFont';
src: url('./my-font.woff2') format('woff2'),
url('./my-font.woff') format('woff');
font-weight: 600;
font-style: normal;
}
body {
font-family: 'MyFont';
}
加载数据
数据也是可以加载的有用资源，如：JSON 文件、CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。
npm install --save-dev csv-loader xml-loader
同样需要更新 webpack.config.js ，在 rules 里加入
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
可以 import 这四种类型的数据(JSON, CSV, TSV, XML)中的任何一种，所导入的 Data 变量将包含可直接使用的已解析 JSON
import Data from './data.xml'
全局资源
|——/components
|——/my-component
|——index.js
|——index.css
|——icon.svg
|——img.png
这种配置方式会使你的代码更具备可移植性，因为现有的统一放置的方式会造成所有资源紧密耦合在一起。假如你想在另一个项目中使用 /my-component，只需将其复制或移动到 /components 目录下。只要你已经安装了任何扩展依赖(external dependencies)，并且你已经在配置中定义过相同的 loader，那么项目应该能够良好运行
管理输出
目前为止，我们在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对文件名使用哈希并输出多个bundle/main，手动对 index.html 文件进行处理，一切就会变得困难起来。
这个时候，我们可以通过一些插件，使这个过程更容易操控。
准备
首先，让我们重新调整一下我们的项目
webpack-demo
|——package.json
|——webpack.config.fs
|——/dist
|——/src
|——index.js
|——print.js // 新增
|——/node_modules
我们在 src/print.js 文件中添加一些测试逻辑
src/print.js
export.default function printMe() {
console.log('I get called from print.js')
}
并且在 src/index.js 文件中使用这个函数
src/index.js
import $ from 'jquery'
import printMe from './print.js'
$('body').on('click', printMe)
$('body').append('<h1>Kofe Chen</h1>')
同时，我们还要更新 dist/index.html 文件，来为 webpack 分离入口做好准备
dist/index.html
<!doctype html>
<html>
<head>
<title>Output Management</title>
<script src="./print.bundle.js"></script>
</head>
<body>
<script src="./app.bundle.js"></script>
</body>
</html>
最后调整配置，在 entry 添加 src/print.js 作为新的入口起点( print )，然后修改 output，一遍根据入口名称动态生成 bundle 名称：
webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
执行的时候，如果存在 webpack.config.js 配置文件，webpack 命令将会默认选择使用它。
webpack 生成了 print.bundle.js 和 app.bundle.js 文件，这也和我们在 index.html 文件中指定的文件名称相对应。
但是，如果我们更改了一个入口起点的名称，甚至添加了一个新的名称，生成的包将被重命名在一个构建中，可原本的 index.html 文件仍然会引用旧的名字。那么我们就需要用 HtmlWebpackPlugin 来解决这个问题。
设定 HtmlWebpackPlugin
首先安装插件，并且调整 webpack.config.js 文件
npm install --save-dev html-webpack-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].main.js',
path: path.resolve(__dirname, 'dist')
}
};
在构建之前，我们应该了解的是：虽然在 dist/ 文件夹中已经有了 index.html 这个文件，然后 HtmlWebpackPlugin 还是会默认生成 index.html 文件。也就是说，HtmlWebpackPlugin 会用新生成的 index.html 文件把我们原来创建的替换掉。
如果想要了解更多 HtmlWebpackPlugin 插件提供的全部功能和选项，可以访问 HtmlWebpackPlugin
你还可以看一下 html-webpack-template，除了默认模板之外，还提供了一些额外的功能。
清理 /dist 文件夹
webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。
通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。
clean-webpack-plugin 是一个比较普及的管理插件
npm install clean-webpack-plugin --save-dev
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
现在执行 npm run build，再检查 /dist 文件夹，如果顺利，应该不会再看到旧的文件，只有构建后生成的文件。
Manifest
通过 manifest ，webpack 能够对 你的模块映射到输出 bundle 的过程 保持追踪。
通俗点讲，就是生成一个 源码到输出文件的映射
详细请访问 Manifest 管理输出 | webpack
