webpack-2-资产管理

官网地址：webpack官网

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: 'main.js',
      path: path.resolve(__dirname, 'dist'),
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader',
+         ],
+       },
+     ],
+   },
  };

2 载入图像

npm install --save-dev file-loader

webpack.config.js

 const path = require('path');
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
    },
+   module: {
+     rules: [
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+            'file-loader'
+         ],
+       },
+     ],
+   },
  };

图片在css中就和平时一样使用，在js中

import Icon from './icon.png';
这时Icon就是新的图片路径了`

3 载入字体

npm install --save-dev file-loader

webpack.config.js

 const path = require('path');
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
    },
+   module: {
+     rules: [
+       {
+         test: /\.(woff|woff2}eot|ttf|otf)$/,
+         use: [
+            'file-loader'
+         ],
+       },
+     ],
+   },
  };

图片在css中就和平时一样使用，在js中

import Icon from './icon.png';
这时Icon就是新的图片路径了`

3 载入数据

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

webpack.config.js

 const path = require('path');
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
    },
+   module: {
+     rules: [
+       {
+         test: /\.(csv|tsv)$/,
+         use: [
+            'csv-loader'
+         ],
+       },
+        {
+         test: /\.xml$/,
+         use: [
+            'xml-loader'
+         ],
+       },
+     ],
+   },
  };

json是默认的数据格式，不需要上面这些。 js中引入数据方式如下:

import data from './data.xml';
console.log(data);

资源加载除了特别说明的图片和数据，其它就是安装插件，modelu里配置，然后就和平时一样使用就可以了