1.4.2 .gitignore 文件
因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。
1.4.3 webpack.prod.conf.js 文件
为了支持多种使用场景，我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD，CMD只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。Webpack 中指定输出格式的设置项为 output.libraryTarget，其支持的格式有：
“var” – 以一个变量形式输出： var Library = xxx (default)；
“this” – 以 this 的一个属性输出： this[“Library”] = xxx；
“commonjs” – 以 exports 的一个属性输出：exports[“Library”] = xxx；
“commonjs2” – 以 module.exports 形式输出：module.exports = xxx；
“amd” – 以 AMD 格式输出；
“umd” – 同时以 AMD、CommonJS2 和全局属性形式输出。
以下是 webpack.prod.conf.js 中 output 设置的示例：
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '',
filename: 'vue-flag-list.min.js',
library: 'VueFlagList',
libraryTarget: 'umd',
umdNamedDefine: true
},
Vue 是组件库的外部依赖。组件库的使用者会自行导入 Vue，打包的时候，不应该将 Vue 打包进组件库。但是，如果你将打包后的组件库以 <script> 标签形式直接引入，你会发现并不能正常执行，提示 vue 未定义。
以 <script> 标签形式使用组件时，会同样使用 <script> 标签导入 Vue。Vue 导入的变量是 “window.Vue” 而不是 “window.vue”，因此会出现 vue 未定义的错误。
所以，我们需要在 webpack.prod.conf.js 中配置 externals，如下：
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
另外，为了将css打包成一个文件，所以需要将 webpack.prod.conf.js 中的plugins 选项的
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),修改为
new ExtractTextPlugin({
filename: 'vue-flag-list.min.css'
}),修改入口文件
entry: {
app: './src/index.js'
},1.5 整理一下目录结构，我的目录结构如下：
- vue-flag-list
+ build
+ dist
- src
+ img
index.js
Vue-Flag-List.vue
...二、用npm发布一个包
在发正式包之前可以在本地先打一个包，然后测试下有没有问题，如果没问题再发布到npm上。
