vue-cli4 创建项目并结合webpack打包vue组件库

最新推荐文章于 2024-09-22 17:15:04 发布

jill-zhou

最新推荐文章于 2024-09-22 17:15:04 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/qq_21923493/article/details/108486209

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、安装vue-cli4

参照vue官网步骤如下：

// 安装vue-cli包
npm install -g @vue/cli
// 安装之后，查看版本信息
vue --version
// 升级vue-cli包
npm update -g @vue/cli

这里只写npm的步骤，详情建议看官网：vue-cli官网

二、创建项目

1、创建项目

vue create hello-world

2、配置步骤：(备注，用cmd,不要用git，因为git不可以用空格选中)

根据需要选择常规配置即可
– 请参考链接

三、开发组件库

四、package.json配置

package.json配置（只写明必要配置），如下：

  "name": "hello-world",  // 组件库名称
  "version": "0.0.1", // 当前发布的版本
  "license": "MIT", // 让用户知道使用权利和限制[npm package.json](https://docs.npmjs.com/files/package.json)
  "private": false, // 设置为true时，则npm会拒绝发布它
  "author": "xxx", // 发布者
  "main": "dist/index.js" // 项目入口文件
  "scripts": {
   	 "build:lib": "webpack --config lib.config.js" // 打包命令
   }

五、webpack打包配置

安装webpack依赖

npm install --save-dev webpack webpack-cli babel-loader

安装相关loader

npm install --save-dev  vue-loader style-loader css-loader

项目目录下创建文件夹，lib.config.json
这里仅仅是常规配置，配置webpack出口入口，以及必要的loader

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

function resolve(dir) {//- 获取绝对路径
    return path.join(__dirname, '..', dir)
}
module.exports = {
    entry: {
      'hello-world.min': './src/components/index.js'
    },
    mode: 'production',
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      libraryExport: 'default', // 对外暴露default属性，就可以直接调用default里的属性
      library: 'hello-world', // // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
      libraryTarget: 'umd', // 定义打包方式
      umdNamedDefine: true,
      filename: 'hello-world.min.js'
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        '@': resolve('src'),
      }
    },
    module: {
      rules: [
         {
            test: /\.vue$/,
            loader: 'vue-loader'
         },
         {
             test: /\.js$/,
             exclude: /node_modules/,
             loader: 'babel-loader'
         },
         {
             test: /\.css|\.scss$/,
             loader:['style-loader','css-loader','sass-loader']
          }
      ] 
    },
    plugins: [
        new ProgressBarPlugin(),
        new VueLoaderPlugin()
    ]
}