2#webpack资源管理

1. 注册安装

// 加载css <style>...</style> style="..."
npm install --save-dev style-loader css-loader
// 加载图片
npm install --save-dev file-loader
// 加载字体
npm install --save-dev url-loader

2. 配置：

module.exports = {
  entry: './src/entry.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use:[{
          loader:'file-loader',
          options:{ // 这里的options选项参数可以定义多大的图片转换为base64
              limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
              name: "[hash:8].[name].[ext]",
              publicPath:'./images',
              outputPath: "images/" //打包时，图片会统一打包放在images文件夹里面，否则直接放在dist文件夹下
          }
        }]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use:[{
                    loader:'file-loader',
                    options:{
                        name: "[name].[ext]",
                        publicPath:'../fonts',
                        outputPath: "fonts/"
                    }
                }]
      },
      {
        test: /\.(csv|tsv)$/,
        use: [
          'csv-loader'
        ]
      },
      {
        test: /\.xml$/,
        use: [
          'xml-loader'
        ]
      }
    ]
  }
};

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png

这种配置方式会使你的代码更具备可移植性，因为现有的统一放置的方式会造成所有资源紧密耦合在一起。假如你想在另一个项目中使用 /my-component，只需将其复制或移动到 /components 目录下。只要你已经安装了任何扩展依赖(external dependencies)，并且你已经在配置中定义过相同的 loader，那么项目应该能够良好运行。