素材管理 Asset Management

webpack 最酷的特性是可以包含任意类型的文件。

加载 CSS

为了在 JavaScript 模块中引入 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置项中设置：

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

webpack.config.js

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

这样就可以在 js 文件中引入 CSS 文件：

src/index.js

import './style.css'

加载图片

使用 file-loader 可以轻易的加载图片：

npm install --save-dev file-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
}

此后，当你在 js 文件中使用 import MyImage from './my-image.png' 时，图片就会经过处理，并添加到你的 output 目录，同时 MyImage 变量会包含经过处理的最终路径。

未完待续...

REF

results matching ""

    No results matching ""