webpack 4 入门指南 系列三（资源管理篇）

• 在开始接下来的教程之前，你应该已经有一个展示“Hello webpack”的小工程了。现在我们来尝试合并一些其他资源，例如图片，看看该如何处理它们。

• 在webpack之前，前端开发人员会使用类似grunt和gulp之类的工具处理这些资源，并把它们从src目录移到dist或build目录中。但类似webpack这样的工具会动态捆绑所有的依赖关系（创建依赖图），相同的想法也用在了Javascript模块上。这样做非常好，因为每个模块都明确指明它的依赖状态，而且我们还可以避免加载不需要的模块。

• webpack最酷的一个特性就是除了Javascript之外， 你可以通过一个加载器包含任何类型的文件。这意味着上述列举的有关JavaScript的好处（例如显示依赖关系），都可以应用于构建网站或Web应用程序时使用的所有内容。通过前面的教程你应该已经熟悉了该设置，让我们先从CSS开始吧。

设置

• 在开始之前，我们做一点点改变先:

dist/index.html

  
  
    
-    
+    
    
    
      
    
  

加载 CSS

• 为了在JavaScript模块中import一个CSS文件，你需要安装并添加style-loader和css-loader到你配置文件的module中：

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

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$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

webpack 使用正则表达式来确定它应该查找哪些文件并对其使用特定加载器。在这个例子中，任何以.css结尾的文件都将使用style-loader和css-loader加载器。

• 这样就允许通过imort "./style.css"导入文件并使用其中的样式。现在当模块运行的时候，一个字符串化的