webpack学习笔记2：资源管理

前面简单构建了一个简单的demo，这一篇我们来学习webpack如何管理其他资源，如图片，css等

步骤：install对应的模块->在配置文件里配置规则->在需要的地方import资源->使用资源

（install相关模块才能import）

以下以加载css为例子

• 加载css

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

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

 然后配置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'
      ]
    }]
  }
};

在需要的地方import

import '../style.css'

 使用

 style.css文件

.hello {
  color: red;
  background: url('./image/logo.png')
}

• 加载图片/加载字体

npm install --save-dev file-loader

• 加载数据

 npm install --save-dev csv-loader xml-loader

最后贴出规则：

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'
      ]
    }, {
      test: /\.(png|jpe?g|gif|svg)$/,
      use: [
        'file-loader'
      ]
    }, {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        'file-loader'
      ]
    }, {
      test: /\.(csv|tsv)$/,
      use: [
        'csv-loader',
      ]
    }, {
      test: /\.xml$/,
      use: [
        'xml-loader'
      ]
    }]
  }
};