1. 模块打包
参考ES6项目(一)项目搭建(webpack、babel、react)
2. 模块发布
参考How to Publish a Package
3. 配置webpack和umd(重要事项)
module.exports = {
entry: __dirname + "/src/index.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/lib/",//打包后的文件存放的地方
filename: "index.js", //打包后输出文件的文件名
libraryTarget: "umd", //配置模块导出(解决模块导入引用为空问题)
library: "minsmap",
auxiliaryComment: "Test Comment"
},
//mode: 'production',
//devtool: 'eval-source-map',
devServer: {
contentBase: "./lib",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
proxy: {
'/neo4j': {
target: 'http://127.0.0.1:8080/',
secure: false
}
}
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
}
支持umd
output: {
path: __dirname + "/lib/",//打包后的文件存放的地方
filename: "index.js",//打包后输出文件的文件名
libraryTarget: "umd",
library: "minsmap",
auxiliaryComment: "Test Comment"
},
output.auxiliaryComment
string
object
在和 output.library
和 output.libraryTarget
一起使用时,此选项允许用户向导出容器(export wrapper)中插入注释。要为 libraryTarget
每种类型都插入相同的注释,将 auxiliaryComment
设置为一个字符串:
output: {
library: "someLibName",
libraryTarget: "umd",
filename: "someLibName.js",
auxiliaryComment: "Test Comment"
}
将会生成如下:
(function webpackUniversalModuleDefinition(root, factory) {
// Test Comment
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("lodash"));
// Test Comment
else if(typeof define === 'function' && define.amd)
define(["lodash"], factory);
// Test Comment
else if(typeof exports === 'object')
exports["someLibName"] = factory(require("lodash"));
// Test Comment
else
root["someLibName"] = factory(root["_"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
// ...
});
对于 libraryTarget
每种类型的注释进行更细粒度地控制,请传入一个对象:
auxiliaryComment: {
root: "Root Comment",
commonjs: "CommonJS Comment",
commonjs2: "CommonJS2 Comment",
amd: "AMD Comment"
}