webpack 配置结构

webpack 整体配置结构

const path = require(‘path’);

module.exports = {
  // 入口文件，webpack 执行构建的起点
  entry: ‘main.js’,
  // 输出配置，webpack处理后输出怎么样的结果 
  output: {
    // 输出文件存放位置，必须是string 类型的绝对路径 
    path: path.resolve(__dirname, ‘dist’),
    // 输出文件名 
    filename: ‘bundle.js’,
    // 发布到线上的所有资源的 URL 前缀，string 类型
    publicPath: ‘/assets/’,
    // 导入库名称
    library: ‘MyLibrary’,
    // 导入库类型
    libraryTarget: ‘umd’,
    // 是否生成有效文件路径信息到代码中
    pathinfo: true,
    // 附加 Chunk 的文件名称
    chunkFilename: ‘[id].js’,
    // JSONP 异步加载资源时的回调函数名称，需要和服务端搭配使用
    jsonpFunction: ‘myWebpackJson’,
    // 生成 Source Map 文件的名称
    sourceMapFilename: ‘[file].map’,
    // 浏览器开发者工具里显示的源码模块名称
    devtoolModuleFilenameTemplate: ‘webpack://[resource-path]’,
    //  异步加载跨域资源使用的方式
    crossOriginLoading: ‘anonymous’
  },

  // 配置模块相关
  module: {
    // 配置 Loader 规则，可配置多个规则
    rules: [
      {
        // 正则匹配使用 Loader 的文件
        test: /\.jsx?$/,
        // Loader 规则只应用在特定文件 
        include: [
          path.resolve(__dirname, ‘xxx’)
        ],
        // Loader 规则会忽略这些文件
        exclude: [
          path.resolve(__dirname, ‘xxx’)
        ],
        // Loader 规则列表，从后向前执行
        use: []
      },
    ],
    // 不需要解析和处理的模块，通过正则匹配模块
    noParse: [
      /special-library\.js$/,
    ],
  },

  // 配置插件
  plugins:[],
  // 配置寻找模块规则
  resolve: {
    // 寻找模块的根目录，数组类型，默认以node_modules 为根目录
    modules: [
      ‘node_modules’,
      path.resolve(__dirname, ‘app’)
    ],
    // 模块后缀名
    extensions: [‘.js’, ‘.json’],
    // 模块别名配置，用于映射模块
    // 当有多个映像规则时，可以使用 array 类型
    alias: [{
      // 映射源像
      name: ‘model’,
      // 映射像
      alias: ‘new-model’,
      // 是否只映射模块
      // true: 只有 ‘module’ 会被映射
      // false: ‘module/inner/path’ 也会被映射
      onlyModule: true
    }],
    // 是否跟随文件的软链接搜寻模块的路径
    symlinks: true,
    // 模块的描述文件
    descriptionFiles: [],
    // 模块的描述文件里描述入口的文件的字段名
    mainFields: [],
    // 是否强制导入语句写明文件后缀名
    enforceExtension: false,
  },

  // 输出文件的性能检查配置
  performance: {
    //有性能问题时输出结果
    // warning：警告
    // error：错误
    hints: false, 
    // 最大文件的大小，单位为 bytes
    maxAssetSize:  10240,
    // 最大入口文件的大小，单位为 bytes
    maxEntrypointSize: 10240,
    assetFilter: function(assetFilename) {
      //过滤要检查的文件
      // ...
    }
  },
  // 配置 source-map 类型
  devtool: ‘source-map’,
  // webpack 使用的根目录，string 类型，且必须为绝对路径
  context: __dirname,
  // 配置输入代码的运行环境，默认为 web
  target: ‘web’,
  // 使用来自 JavaScript 运行环境提供的全局变量
  externals: {},
  // 控制台输出日志控制
  stats: {
    assets: true,
    colors: true,
    errors: true,
    errorDetails: true,
    hash: true,
  },

  // devServer 相关配置
  devServer: {
    // 代理到后端服务接口
    proxy: {
      ‘api’: ‘http://local host:8080’
    },
    // 配置 DevServer HTTP 服务器的文件目录
    contentBase: path.join(__dirname, ‘public’),
    // 是否开启 Gzip 压缩
    compress: true,
    // 是否开发HTML5 History API 网页
    historyApiFallback: true,
    // 是否开启模块热加载功能
    hot: true,
    // 是否开启 https 模式
    https: false,
    // 是否捕捉 webpack 构建的性能信息
    profile: true,
    // 是否启用缓存来提升构建速度
    cache: false,

    // 是否开启监听模式
    watch: true,
    // 监听模式选项
    watchOptions: {
      // 忽略对匹配文件的监听，支持正则匹配，默认为空
      ignored: /node_modules/,
      // 响应时间，默认为 300s，防止文件更新太快导致频繁编译
      aggregateTimeout: 300，
      // 每秒询问文件是否发生变化次数，默认每秒1000次
      poll: 1000
    }
  }
}