基于webpack搭建到抽离前端组件到发布在npm库

本篇分为三个部分，webpack搭建，前端组件抽离，在npm库上发布自己的包(基于vue)

webpack搭建

1. 用npm init初始化，得到package.json，下载几个常见的webpack中的包，配置“dev”，“build”用于运行和打包项目。
   运行项目的配置则存在于webpack.dev.config.js文件中
   打包项目的配置存在于webpack.build.config.js文件中

{
  "name": "@kuke/head-ui",
  "version": "1.0.0",
  "description": "表单框架头部组件",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config build/webpack.dev.config.js",
    "build": "webpack --config build/webpack.build.config.js"
  },
  "repository": {
    "type": "git",
    "url": "www"
  },
  "devDependencies": {

  },
  "dependencies": {
    "cross-env": "^3.0.0",       //跨平台的设置及使用环境变量，无需担心跨平台问题
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"    // 默认以当前目录为基准目录
  },
  "author": "rookie.he",
  "license": "ISC"
}

1. 配置webpack.build.config.js文件和webpack.dev.config.js文件（可直接复制使用）
   webpack.dev.config.js:

var path = require('path')    // 用于规范化路径
var webpack = require('webpack')

module.exports = {
    entry: './example/main.js',    // 入口文件，即打包从哪个文件开始
    output: {      // 生成的文件输出到哪个地方去
        path: path.resolve(__dirname, './dist'),   // 返回一个相对于当前工程目录的绝对路径
        publicPath: '/dist/',
        filename: 'build.js'    // 输出的文件名称
    },
    module: {
        rules: [     // 模块解析规则，下面是一些文件及对应的loader
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {}
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader", options: {
                        paths: [
                            path.resolve(__dirname, "node_modules")
                        ]
                    }
                }]
            },
            {
                test: /\.(svg|woff|ttf|eot|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {    // 影响模块的解析规则
        alias: {    // 用其它模块或路径替换一个模块
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    devServer: {    // 指当webpack config传给webpack-dev-server命令行时，这个选项用来配置webpack-dev-server的一些行为。
        historyApiFallback: true,
        noInfo: true
    },
    performance: {     // 关闭提示
        hints: false
    },
    devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {        // 当如下平台环境时，进行下列操作
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

webpack.build.config.js：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/dist/',
        filename: 'kuke-ui.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {}
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader", options: {
                        paths: [
                            path.resolve(__dirname, "node_modules")
                        ]
                    }
                }]
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue'
        }
    }
};

注意完成上述操作我们需要增加许多包：

"devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "style-loader": "^0.16.1",
    "vue": "^2.2.1",
    "vue-loader": "^11.1.4",
    "vue-router": "^2.5.3",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  },

因为我们是在es2015环境下进行的操作，所以需要创建一个.babelrc文件放在根目录中

{
  "presets": [
    ["latest", {
      "es2015": { "modules": false }
    }]
  ]
}

因为上述打包的配置中的文件暂不存在，所以我们需要见一些文件，文件目录如下：

此时运行npm run dev正常，运行npm run build正常，打包完成后会在根目录下生成一个dist文件夹，里面包含kuke-ui.js文件

组件抽离

把抽离的组件放在src文件下面，而example文件下放一些组件的实例
1. 在src文件下新建一个components文件，components文件下放一些抽离的组件，具体的组件内容可以到我的git仓库下载，下面以SearchBar为例。
2. 在src中的index.js文件中进行配置

import SearchBar from './components/SearchBar'

const kukeview = {
    'kuke-searchbar': SearchBar,
}

const install = function(Vue, opts = {}){
    Object.keys(kukeview).forEach((key) => {
        Vue.component(key, kukeview[key]);     // 遍历，并注册每一个组件
    })
}
export default install;

1. 在example中引用组件，main.js中引入必要文件

import Vue from 'vue'
import router from './router'
import App from './App.vue'
import kukeui from '../src/index'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import './fonts/iconfont.css'
// 引入axios
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios)
Vue.use(kukeui)
Vue.use(iView)

new Vue({
    router,
    el: '#app',
    render: h => h(App)
})

1. 部署路由

import Vue from 'vue'
import Router from 'vue-router'
import SearchBar from '../pages/SearchBar.vue'

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/SearchBar',
            name: 'SearchBar',
            component: SearchBar
        }
    ]
})

完成组件的抽离，效果示例效果如下：

下一篇查看如何在npm发布自己的包和长传文件到gitjub
点击此处去github下载kuke组件：https://github.com/wwjhzc/kuke-ui
作者：rookie.he（kuke_kuke）
博客链接：http://blog.csdn.net/qq_33599109
欢迎关注支持，谢谢！