Webpack配置选项
来源:互联网 发布:ubuntu安装ssh服务 编辑:程序博客网 时间:2024/06/07 13:12
const path = require(‘path’);
module.exports = {
entry: “./app/entry”, // string | object | array
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
path: path.resolve(__dirname, "dist"), // string// 所有输出文件的目标路径// 必须是绝对路径(使用 Node.js 的 path 模块)filename: "bundle.js", // string// 「入口分块(entry chunk)」的文件名模板(出口分块?)publicPath: "/assets/", // string// 输出解析文件的目录,url 相对于 HTML 页面library: "MyLibrary", // string,// 导出库(exported library)的名称libraryTarget: "umd", // 通用模块定义// 导出库(exported library)的类型/* 高级输出配置(点击显示) */
},
module: {
// 关于模块配置
rules: [ // 模块规则(配置 loader、解析器等选项) { test: /\.jsx?$/, include: [ path.resolve(__dirname, "app") ], exclude: [ path.resolve(__dirname, "app/demo-files") ], // 这里是匹配条件,每个选项都接收一个正则表达式或字符串 // test 和 include 具有相同的作用,都是必须匹配选项 // exclude 是必不匹配选项(优先于 test 和 include) // 最佳实践: // - 只在 test 和 文件名匹配 中使用正则表达式 // - 在 include 和 exclude 中使用绝对路径数组 // - 尽量避免 exclude,更倾向于使用 include issuer: { test, include, exclude }, // issuer 条件(导入源) enforce: "pre", enforce: "post", // 标识应用这些规则,即使规则覆盖(高级选项) loader: "babel-loader", // 应该应用的 loader,它相对上下文解析 // 为了更清晰,`-loader` 后缀在 webpack 2 中不再是可选的 // 查看 webpack 1 升级指南。 options: { presets: ["es2015"] }, // loader 的可选项 }, { test: /\.html$/, test: "\.html$" use: [ // 应用多个 loader 和选项 "htmllint-loader", { loader: "html-loader", options: { /* ... */ } } ] }, { oneOf: [ /* rules */ ] }, // 只使用这些嵌套规则之一 { rules: [ /* rules */ ] }, // 使用所有这些嵌套规则(合并可用条件) { resource: { and: [ /* 条件 */ ] } }, // 仅当所有条件都匹配时才匹配 { resource: { or: [ /* 条件 */ ] } }, { resource: [ /* 条件 */ ] }, // 任意条件匹配时匹配(默认为数组) { resource: { not: /* 条件 */ } } // 条件不匹配时匹配],/* 高级模块配置(点击展示) */noParse: [ /special-library\.js$/],// 不解析这里的模块unknownContextRequest: ".",unknownContextRecursive: true,unknownContextRegExp: /^\.\/.*$/,unknownContextCritical: true,exprContextRequest: ".",exprContextRegExp: /^\.\/.*$/,exprContextRecursive: true,exprContextCritical: true,wrappedContextRegExp: /.*/,wrappedContextRecursive: true,wrappedContextCritical: false,// specifies default behavior for dynamic requests
},
resolve: {
// 解析模块请求的选项
// (不适用于对 loader 解析)
modules: [ "node_modules", path.resolve(__dirname, "app")],// 用于查找模块的目录extensions: [".js", ".json", ".jsx", ".css"],// 使用的扩展名alias: { // 模块别名列表 "module": "new-module", // 起别名:"module" -> "new-module" 和 "module/path/file" -> "new-module/path/file" "only-module$": "new-module", // 起别名 "only-module" -> "new-module",但不匹配 "only-module/path/file" -> "new-module/path/file" "module": path.resolve(__dirname, "app/third/module.js"), // 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误 // 模块别名相对于当前上下文导入},/* 可供选择的别名语法(点击展示) *//* 高级解析选项(点击展示) */
},
performance: {
hints: “warning”, // 枚举
maxAssetSize: 200000, // 整数类型(以字节为单位)
maxEntrypointSize: 400000, // 整数类型(以字节为单位)
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith(‘.css’) || assetFilename.endsWith(‘.js’);
}
},
devtool: “source-map”, // enum
// 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
// 牺牲了构建速度的 `source-map’ 是最详细的。
context: __dirname, // string(绝对路径!)
// webpack 的主目录
// entry 和 module.rules.loader 选项
// 相对于此目录解析
target: “web”, // 枚举
// 包(bundle)应该运行的环境
// 更改 块加载行为(chunk loading behavior) 和 可用模块(available module)
externals: [“react”, /^@angular\//],
// 不要遵循/打包这些模块,而是在运行时从环境中请求他们
stats: “errors-only”,
// 精确控制要显示的 bundle 信息
devServer: {
proxy: { // proxy URLs to backend development server
‘/api’: ‘http://localhost:3000’
},
contentBase: path.join(__dirname, ‘public’), // boolean | string | array, static file location
compress: true, // enable gzip compression
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
https: false, // true for self-signed, object for cert authority
noInfo: true, // only errors & warns on hot reload
// …
},
plugins: [
// …
],
// 附加插件列表
/* 高级配置(点击展示) */
}这里写链接内容
- Webpack配置选项
- webpack 配置项选项详解
- webpack配置选项的设置
- webpack配置
- webpack配置
- webpack 配置
- webpack配置
- webpack配置
- webpack 配置
- webpack配置
- webpack配置
- Webpack配置
- webpack配置
- 使用Webpack创建vue的tab选项
- webpack echarts配置实例
- webpack安装和配置
- webpack 发布配置
- webpack配置浅析
- 详解spring 每个jar的作用
- python 图像gamma校正
- Android 经典笔记之八:网络请求数据基础介绍
- 简单的递归,实现树结构菜单显示
- Fiori2.0学习笔记-核心技术框架&基本项目结构
- Webpack配置选项
- Unity3d iIween插件的研究
- JDK和JRE的区别
- Android O 前期预研之三:Android Vehicle HAL
- AndroidStudio项目import进的包都是红色的
- Android自定义视频录制时的带进度条的按钮
- TensorFlow训练遇到的问题总结
- Eigen中的基本函数
- 存储过程脚本汇总