webpack配置详解【三】 -- module详解

知识点：

1、loader加载顺序是 从右到左，从下到上

2、多个loader用use
      use: [‘style-loader’, ‘css-loader’]

3、exclude和include的搭配使用可以缩小匹配的范围

4、如果觉得loader自带顺序导致格式混乱的话，或者觉得不方便可以指定 enforce的值来指定loader的顺序

参数	说明
pre	优先处理
normal	正常处理（默认，可不写）
inline	其次处理
post	最后处理

5、使用oneOf提升效率，大部分文件我们预期只被一个rules匹配。

const {
      resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
     
  entry: './src/index.js',
  output: {
     
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
     
    rules: [
      // loader的配置
      {
     
        test: /\.css$/,
        // 多个loader用use
        use: ['style-loader', 'css-loader']
      },
      {
     
        test: /\.js$/,
        // 排除node_modules下的js文件
        exclude: /node_modules/,
        // 只检查 src 下的js文件
        include: resolve(__dirname, 'src'),
        // 优先执行
        enforce: 'pre',
        // 单个loader用loader
        loader: 'eslint-loader',
        options: {
     }
      },
      {
     
        // 以下配置只会生效一个
        oneOf: []
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};