webpack概念

参考

1.module中rules理解

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};

module.exports = config;

在module中定义的rules中必须包含
test,use
这个规则的意思是在碰到 .js|.jsx的文件时需要先用babel-loader转换一下

2.__dirname 和 path.resolve([..paths])

__dirname
path.resolve([..paths])

3.loader的三种使用方法

之前自己玩过cli方式的
loader的三种使用方法