webpack之module | resolve | devtool

module

module模块决定了如何处理项目中的不同类型的模块。

webpack.config.js

module:{
    rules:[
    // Conditions, Results and nested Rules.
        {
        test: /\.jsx?$/,
        
        exclude: [
          'node_modules'
        ],
        // flags to apply these rules, even if they are overridden (advanced option)
        // loader: "babel-loader",
        // rule.use是数组形式和rule.loaders是它的别名
        use:[{
           loader: "babel-loader",
        }]
      },
    ]
  }
};

test: 匹配文件是否用该模块处理 use: 确认匹配使用loader处理

resolve

resolve: 设置模块如何被解析

webpack.config.js

module.exports = {
  entry:base,
  output: {
  	path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  resolve:{
    alias:{
        test:path.resolve(__dirname,'test/test/test.js')
    }
  },
  //entry ==> rules ===> webpack ==> output
  module:{
    rules:[
        {
        test: /\.jsx?$/,        
        exclude: [
          'node_modules'
        ],
        use:[{
           loader: "babel-loader",
        }]
      },
    ]
  }
};

resolve.alias: 创建 import 或 require 的别名，来确保模块引入变得更简单

比如:当我们要引用上图内的index.js文件时,我们一般会使用第一种方法

如果使用resolve.alias, 就可以直接引用别名为test的文件 前提是在webpack.config.js里设置好文件的路径 截取resolve部分

  resolve:{
    alias:{
        test:path.resolve(__dirname,'test/test/test.js')
    }
  },

如图, 设置alias, alias是一个对象

key是名字, value是路径, 我们使用path模块拿到test.js文件, path.resolve返回一个绝对路径

devtool

devtool: 此选项控制是否生成，以及如何生成 source map

devtool: 'source-map'

index.js

import test  from 'test';
debugger;
console.log(test());

如果不设置source-map, debugger会进入编译后的文件, 这样是不利于我们排查错误的. 设置source-map之后, debugger会进入源文件

你可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项，因为它有更多的选项。切勿同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 选项在内部添加过这些插件，所以你最终将应用两次插件。

可选配置及运行速度如下表

一般推荐source-map