如果是从一开始就沿用指南的示例，现在应该有一个可以显示“Hello webpack”的小项目。接下来尝试混合一些图像之类的其他资源，看看 webpack 如何处理。
在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。JavaScript 模块也遵循同样的方式。但是，像 webpack 这样的工具将 动态打包 所有依赖并创建所谓的 依赖图。这是极好的创举，因为现在每个模块都可以 明确表述它自身的依赖，以避免打包未使用的模块。
webpack 最出色的功能之一就是除了引入 JavaScript，还可以通过 loader 或内置的 资源模块 引入任何其他类型的文件。换言之，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这些设置。
设置在开始前对项目做一个小的修改：
dist/index.html
-
+
-
+
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
- filename: 'main.js',
+ filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};加载 CSS要想在 JavaScript 模块中导入 CSS 文件，需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：
npm install --save-dev style-loader css-loaderwebpack.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'],
+ },
+ ],
+ },
};module loader 可以链式调用。链中的每个 loader 都将对资源进行转换，不过链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。
请确保 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误。
提示webpack 根据正则表达式确定应该查找哪些文件，并将其提供给指定的 loader。在此示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。
这些配置可以帮助在依赖于此样式的 JavaScript 文件中 import './style.css'。现在，在此模块执行过程中，含有 CSS 字符串的