管理资源

上一节创建了一个基础项目，了解了webpack的打包。

现在，尝试混合一些其他资源，比如 images，css等，看看webpack 的处理。

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。JavaScript 模块也遵循同样方式，但是，像 webpack 这样的工具，将动态打包所有依赖（创建所谓的依赖图(dependency graph)）。

这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，可以避免打包未使用的模块。

webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。

设置

dist/index.html：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>webpack demo - 管理资源</title>
</head>

<body>
  <script src='bundle.js'></script>
</body>

</html>

webpack.config.js

 const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
    filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

加载css

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

所以如果需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader。
css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们；
style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

为了在 JavaScript 模块中 import 一个 CSS 文件，接下来，安装 style-loader 和 css-loader，并在 module 配置中添加这些 loader。

命令行输入：

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

执行以上命令后，会在当前目录生成 node_modules 目录，就是 css-loader 和 style-loader 的安装目录。

安装完成：
在这里插入图片描述

webpack.config.js

修改webpack.config.js：

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
    ]
  }
}

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。

应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader'在后。

如果不遵守此约定，webpack 可能会抛出错误。

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。

在上面的配置中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。

可以在依赖于此样式的 js 文件中 import './style.css'。

在此模块执行过程中，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。

style.css

src 下面新建 style.css 文件：

.hello {
  color: red;
}

项目结构

此时目录结构：

  webpack-demo
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
   |- style.css
   |- index.js
  |- /node_modules

修改 src/index.js：

import _ from 'lodash';
import './style.css'

function component () {
  const element = document.createElement('div');

  // lodash 在当前 script 中使用 import 引入
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  return element;
}

document.body.appendChild(component());

运行 build 命令：
在这里插入图片描述
webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。
在页面启动时，会先执行 index.js 中的代码，其它模块会在运行 require 的时候再执行。

在浏览器中打开 dist/index.html，可以看到， Hello webpack 现在的样式是红色：
在这里插入图片描述

鼠标右键检查页面，可以看到，页面的 head 标签包含 style 块元素，也就是在 index.js 中 import 的 css 文件中的样式：
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FrKz4F2x-1645697657057)(C:\Users\mayn\AppData\Roaming\Typora\typora-user-images\image-20220224155429346.png)]$