webpack

前端工程

config

const config = {
  // 配置信息
};
module.exports = config

入口

entry: {
  app: './src/app.js',
  vendors: './src/vendors.js',
}

设置一个对象为每个入口指定入口文件，入口可以是一个字符串也可以是一个数组。也可以只设置一个入口，此时将会默认设置这个路径为 main 入口的入口文件。

输出

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js'
}

• path: 所有输出文件的路径
• filename: 主文件的名称
• publicPath: 输出目录对应的公开 URL
• library: 导出库的名称
• libraryTarget: 导出库的类型，可以是下列值
  
  • this: 将入口返回值分配给 this 的属性
  • window: 将入口返回值分配给 window 的属性
  • global: 将入口返回值分配给 global 的属性
  • commonjs: 将入口返回值分配给 exports 的属性
  • commonjs2: 将入口返回值分配给 module.exports 对象
  • amd: 将 library 暴露为 AMD 模块
  • umd: 将 library 暴露为所有模块化规范下都可运行的方式
  • jsonp: 将入口返回值包裹到一个 jsonp 包装容器中

loader

loader 的作用是在加载模块时对文件进行预处理，在 module.rules 中定义预处理的规则。use 属性既可以是一个表示 loader 的字符串，也可以是包含多个 loader 的数组

module: {
  rules: [
    { test: /\.ts$/, use: 'ts-loader' },
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    }
  ]
}

每条规则可以包含以下属性

• test: 匹配条件，可以是字符串或者正则表达式
• include: 必须匹配条件
• exclude: 必不匹配条件
• loader: 应用的 loader
• option: 可选项

解析

解析模块请求的选项

resolve: {
  alias: {
    module: path.resolve(__dirname, 'app/third/module.js')
  }
}

• modules: 用于查找模块的目录
• extensions: 模块可能的扩展名
• alias: 定义模块的别名

构建目标

target 可以是以下值 "web"、"webworker"、"node"、"async-node"、"node-webkit"、"electron-main"、"electron-renderer"

外部扩展

防止将某些模块打包到 bundle 中，而是在运行时获取这些扩展依赖。

external: {
  jquery: 'jQuery'
}

插件

插件旨在解决 loader 无法实现的功能，使用时需要传入插件的实例

plugins: [
  new webpack.optimize.UgliJsPlugin(),
  new HtmlWebpackPlugin({template: './src/index.html'})
]