webpack管理资源（loader操作）

1.加载css

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' + ] + } + ] + } };

2.加载picture

npm install --save-dev file-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'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+ ] + } ] } };

3.加载字体

npm install --save-dev file-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'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
+       {
+         test: /\.(woff|woff2|eot|ttf|otf)$/,
+         use: [
+           'file-loader'
+ ] + } ] } };

src/style.css文件中：

+ @font-face {
+   font-family: 'MyFont';
+   src:  url('./my-font.woff2') format('woff2'),
+         url('./my-font.woff') format('woff');
+ font-weight: 600; + font-style: normal; + } .hello { color: red; + font-family: 'MyFont'; background: url('./icon.png'); }

4.加载数据

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

webpack.config.js文件中：

+       {
+         test: /\.(csv|tsv)$/,
+         use: [
+           'csv-loader'
+ ] + }, + { + test: /\.xml$/, + use: [ + 'xml-loader' + ] + }