使用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.js，mkdir src && touch src/index.js

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

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

3. 在项目根目录下建一个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
    }
}

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

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

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

编写vue插件

1. 在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>
   

   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 文件里的 <script> 块
           new VueLoaderPlugin()
       ]
       ...
   }
   

   1. vue-loader中依赖了vue-style-loader，所以不需要重复安装vue-style-loader

   2. css-loader需要配置esModule: false，否则组件中的样式无效，参考https://blog.csdn.net/vv_bug/article/details/108148263

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

编写测试代码

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

2. 创建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')
           }
       }
   }
   

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

4. 创建测试文件，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>
   

5. 执行npm run demo，启动好后访问http://localhost:8080/
   

用npm link测试

1. 构建npm run dev

2. npm link

3. 链接到测试项目中去，npm link vue-plugin-demo

4. 在测试项目中使用
   

总结

第一次不用脚手架搭建前端工程会遇到很多坑，只有动手做一遍才能够掌握，如果这篇文章对你有帮助的话，就给小编点个赞给点鼓励吧！最后奉上demo地址https://github.com/775146061/vue-plugin-demo