使用webpack搭建一个vue插件

前言

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

环境准备

  • node版本 >= 10.13.0

初始化项目

  1. 创建项目目录mkdir vue-plugin-demo && cd vue-plugin-demo

  2. 初始化成npm包npm init

  3. 安装webpack相关依赖npm install --save-dev webpack webpack-cli cross-env

webpack-cli是webpack命令行工具的依赖包,cross-env用于跨平台设置和使用环境变量。

验证webpack是否安装成功

  1. 在项目根目录下建src目录,并创建index.jsmkdir src && touch src/index.js

  2. 随便写点儿代码在里面:

export default function Foo() {
    console.log('年轻人要讲武德')
}
Foo()
  1. 在项目根目录下建一个build目录,并创建webpack配置文件webpack.dev.jsmkdir 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
    }
}
  1. 在package.json的scripts中加入命令:
{
  ...
  "scripts": {
    "dev": "webpack --config build/webpack.dev.js"
  }
  ...
}
  1. 执行命令npm run dev验证打包,会看到根目录下会多出一个dist目录,里面的main.js就是打包出来的文件。

使用webpack搭建一个vue插件_第1张图片

编写vue插件

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

    // src/my-component.vue
    
    
    
    
    
    

    css预处理使用了stylus,所以需要安装相应的webpack loader。

    // 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
    
  2. 安装vue、vue-loader和vue-template-compiler,npm install --save-dev vue-loader vue vue-template-compiler

    vue-loader解析.vue文件,vue-template-compiler编译template模板

  3. 安装stylus、stylus-loader、css-loader,npm install --save-dev stylus stylus-loader css-loader

  4. 配置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 文件里的 
                        
                        

你可能感兴趣的:(vue,webpack)