使用webpack将所有组件打包起来，并通过script标签直接使用

最新推荐文章于 2024-05-28 09:53:24 发布

朽木自雕xmzd

最新推荐文章于 2024-05-28 09:53:24 发布

阅读量2.1k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_16687863/article/details/107709734

版权

前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

使用webpack将所有组件打包起来，并通过script标签直接使用

需求：需要将所有的组件打包起来，通过script标签引入html页面，在页面上使用自定义的组件名就能直接使用，就像element-ui

效果如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./app.2780147b.css">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 自己写的组件，直接引用，在html页面中就能使用 -->
	<script src="./myLib.js"></script>
</head>
<body>
	<div id="app">
		<op-check-box></op-check-box>
	</div>

	<script>
	  new Vue({
	    el: '#app'
		})
	</script>
</body>
</html>

一、项目结构图：

二、组件中的index.js代码

import checkBox from './src/checkBox'

checkBox.install = function (Vue) {
  Vue.component(checkBox.name, checkBox)
}

export default checkBox

三、index.js打包入口文件

import Vue from 'vue'

import Radio from './packages/radio/src/radio.vue'
import CheckBox from './packages/checkBox/src/checkBox.vue'

Vue.config.productionTip = false

const components = [
  Radio,
  CheckBox
]

// 将所有组件注册在Vue上
const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default components

四、在package.json中加入

与name同级，myLib.js为你的库名

  "main": "dist/myLib.js",

五、webpack.config.js配置如下

注意：如报错，根据对应的提示配置对应的 loader 就行，如：笔者使用的 scss，你可能使用的是 less。

到这里就已经完成了，当然你也可以将这个包发布到npm上，就可以在项目上直接下载使用了。

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'myLib.js',
    library: 'myLib',
    libraryTarget: 'umd'
  },

  plugins: [
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css|.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

朽木自雕xmzd

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
使用webpack将所有组件打包起来，并通过script标签直接使用

使用webpack将所有组件打包起来，并通过script标签直接使用需求：需要将所有的组件打包起来，通过script标签引入html页面，在页面上使用自定义的组件名就能直接使用，就像element-ui效果如下：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt.
复制链接

扫一扫

专栏目录