使用webpack搭建一个vue插件

前言

作为一个现代前端，webpack多多少少都有接触过，但是我们平常都是直接使用脚手架工具搭建项目，自动集成了webpack，对于如何从0到1搭建一个webpack工程我们并不熟悉，那么我们今天就一起手把手来搭建一个基于webpack的vue插件，相信在这个过程中我们能够对webpack的使用有更深入理解。

环境准备

node版本 >= 10.13.0

初始化项目

创建项目目录mkdir vue-plugin-demo && cd vue-plugin-demo
初始化成npm包npm init
安装webpack相关依赖npm install --save-dev webpack webpack-cli cross-env

验证webpack是否安装成功

在项目根目录下建src目录，并创建index.js，mkdir src && touch src/index.js
随便写点儿代码在里面:

export default function Foo() {
    console.log('年轻人要讲武德')
}
Foo()

在项目根目录下建一个build目录，并创建webpack配置文件webpack.dev.js，mkdir build && touch build/webpack.dev.js

// build/webpack.dev.js
module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: "[name].js",
        libraryTarget: 'umd',
        umdNamedDefine: true
    }
}

在package.json的scripts中加入命令：

{
  ...
  "scripts": {
    "dev": "webpack --config build/webpack.dev.js"
  }
  ...
}

执行命令npm run dev验证打包，会看到根目录下会多出一个dist目录，里面的main.js就是打包出来的文件。

使用webpack搭建一个vue插件

编写vue插件

在src下面创建组件touch src/my-component.vue

// src/my-component.vue
<template>
    <div class="my-component">
        <span>我的第一个vue插件</span>
    </div>
</template>
   
<script>
    export default {
        name: "MyComponent"
    }
</script>
   
<style scoped lang="stylus">
    .my-component {
        span {
            font-size: 20px;
            color: red;
        }
    }
</style>

// src/index.js
import MyComponent from './my-component.vue'
import Vue from 'vue'
   
const plugin = {
    install: function(Vue, options) {
        Vue.component(MyComponent.name, MyComponent)
    }
}
   
export default plugin

安装vue、vue-loader和vue-template-compiler，npm install --save-dev vue-loader vue vue-template-compiler
安装stylus、stylus-loader、css-loader，npm install --save-dev stylus stylus-loader css-loader

配置webpack.dev.js

// build/webpack.dev.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
modele.exports = {
    ...
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.styl(us)?$/,
            use: [
                'vue-style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        esModule: false
                    }
                },
                'stylus-loader'
            ]
        }]
    },
    plugins: [
        // 这个插件是必须的！ 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块
        new VueLoaderPlugin()
    ]
    ...
}

执行npm run dev验证是否配置成功

编写测试代码

安装webpack-dev-server和html-webpack-plugin，以便起测试服务，npm install --save-dev webpack-dev-server html-webpack-plugin

创建webpack.demo.js，touch build/webpack.demo.js

// build/webpack.demo.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
   
module.exports = {
    mode: process.env.NODE_ENV,
    entry: './example/main.js',
    output: {
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.styl(us)?$/,
            use: [
                'vue-style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        esModule: false
                    }
                },
                'stylus-loader'
            ]
        }]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './example/index.html'
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, '../example/dist'),
        port: 8080
    },
    resolve: {
        alias: {
            main: path.resolve(__dirname, '../src')
        }
    }
}

在package.json中添加脚本，"demo": "cross-env NODE_ENV=development webpack serve --progress --config build/webpack.demo.js"

创建测试文件，mkdir example && touch example/main.js && touch example/index.html

// example/main.js
import MyComponent from 'main/index.js'
import Vue from 'vue'
   
Vue.use(MyComponent)
   
new Vue({
    render(h) {
        return h('my-component')
    }
}).$mount('#app')

// example/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>