3分钟快速了解webpack.config.js文件结构

webpack.config.js

本文只介绍配置大纲，详细配置请查看官网配置文档

主要配置说明

context

参数为一个路径地址，webpack将从这个路径获取entry和loader

const path = require('path');

module.exports = {
    
    
  //...
  context: path.resolve(__dirname, 'app')
}

entry

编译打包代码的入口文件

module.exports = {
    
    
  entry: 'index.js'
}

mode

指明打包使用的环境配置：‘none’ | ‘development’ | ‘production’

不同的配置打包时会启用不同的插件以及一些自定义的配置信息

默认为’production’

module.exports = {
    
    
  mode: 'development'
}

output

配置打包之后的文件的输出路径以及输出方式

module.exports = {
    
    
	output: {
    
    
		path: path.resolve(__dirname, 'dist')
	}
}

module

配置项目对不同模块的处理方式

module.exports = {
    
    
  module: {
    
    
    noParse: /jquery|lodash/, // webpack将不去解析正则表达式配到的文件
    // ... 其他配置
  }
}

module主要用于配置rules：模块创建时的规则

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.json$/, // 匹配.json文件
        type: 'javascript/auto', // 设置匹配模块的类型
        loader: 'custom-json-loader'// 使用的自定义加载器
      }
    ]
  }
}

resolve

配置如何解析模块

// 配置别名
const path = require('path')
module.exports = {
    
    
  resolve: {
    
    
    alias: {
    
    
      Utilities: path.resolve(__dirname, 'src/utilities/')
    }
  }
}

// 使用方式
import Utility from 'Utilities/utility'

optimization

webpack打包时的优化配置

module.exports = {
    
    
  optimization: {
    
    
    moduleIds: 'hashed' // webpack选择模块ID时使用哪种算法
  }
}

plugins

webpack打包时使用的插件

module.exports = {
    
    
  plugins: [
    new webpack.DefinePlugin({
    
     // 定义打包时全局变量的插件
      'process.env.NODE_ENV': '"production"'
    })
  ]
}

devServer

开发模式下的配置参数

module.exports = {
    
    
  //...
  devServer: {
    
    
    port: 8080, // 开发时的项目端口
    proxy: {
    
     // 请求代理
      '/api': 'http://localhost:3000'
    }
  }
}

targets

webpack可以针对多种环境进行编译打包

module.exports = {
    
    
  target: 'node'// 打包成为在nodejs环境中运行的代码
};

watch

开发时使用，当文件修改时，会自动重新编译

module.exports = {
    
    
  watch: true// 默认为false
}

externals

配置运行时使用但不需要打包到程序的的模块

// index.html 中配置
<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>
// webpack.config.js中配置
module.exports = {
    
    
  externals: {
    
    
    jquery: 'jQuery'
  }
}