静态资源的引入

上一章中已经搭建好开发环境，下面开始逐渐丰富项目的内容，本章是静态资源的引入。

安装依赖

webpack默认是只认识JavaScript的，只知道该怎么处理它，如果项目中出现了其他类型的文件，并且也希望webpack对它进行打包的时候，就要安装对应的loader了。

loader是什么，下面内容源自webpack中文网站

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

css-loader

$ yarn add css-loader style-loader -D

.hello{
   color:red;
}

 module: {
        rules: [
          +  {
          +    test: /\.css$/,
          +    use: ['style-loader', 'css-loader']
          + }
        ],
    }

$ yarn add file-loader -D

import img from  "./index.png"
let image: HTMLImageElement = document.createElement("img");
image.src = img;
document.body.append(image);

 module: {
      rules: [
          +{
          +   test: /\.(png|jpe?g|gif)$/i,
          +  use:['file-loader'],
          +},
      ],
  },