webpack打包项目修改哪些配置,webpack打包单个组件
在vue项目的开发中，我们会把经常用到的逻辑或者模块抽象成组件。对于那些在很多项目中使用的组件，我们可以考虑封装成组件库。本文主要介绍webpack如何封装一个按需引入的vue组件库的信息。有需要的朋友可以参考一下。
目录
前言利用项目webpack中vue组件库的通用姿态，实现可按需引入的组件库。下一步是用webpack封装和调试组件库npm。发布步骤非常简单，只需要4个步骤来调试组件库。按需介绍摘要。
前言
一般公司里有很多相同技术栈的项目。毕竟在多个项目间复制通用组件代码太繁琐，不利于组件库的维护。因此，如何高效地维护一套通用的组件代码是非常重要的。在这种情况下，我们一般可以考虑将其封装成一个组件库，发布到npm。在每个项目中，只能使用npm install xxx，避免了项目间的复制。我们开始用webpack打包一个公共的vue组件库。
在项目中使用vue组件库的一般姿势
1.通过import导入，使用导入文件main.js中的Vue.use方法完成组件的全局注册，可以直接在任何单文件组件中使用。从“vue”导入Vue，如下所示
从导入应用程序。/App.vue
从“mylib”导入mylib
Vue.use(mylib)
新Vue({
render: h=h(App)
}).$ mount( # app )；
2.上面的方法看似一劳永逸，但是随着组件库越来越强大，就会出现我引入了整个组件库代码，但是在当前项目中只使用了很少一部分组件，但是在项目最终打包的时候，我把组件库中的组件代码全部打包到了捆绑文件中，影响了最终的代码量。这显然不合理。所以有一种按需引入组件库的方法。这里指的是element-ui的按需引入方式，如下。
接下来，如果你只想引入一些组件，比如Button和Select，那么你需要在main.js中编写如下代码：
从“Vue”导入Vue；
从“元素-ui”导入{按钮，选择}；
从导入应用程序。/app . vue ；
Vue.component(Button.name，Button)；
Vue.component(Select.name，Select)；
新Vue({
埃尔： #app ，
render: h=h(App)
});
为什么命名导入组件可以按需导入？实际上，babel-plugin-component插件帮助我们完成了转换。在babel-plugin-component里面，你会把
从“元素-ui”导入{按钮，选择}；
转换为
var button=require(“element-ui/lib/button”)
var select=require( element-ui/lib/select )
require( element-ui/lib/theme-chalk/button/style . CSS )
require( element-ui/lib/theme-chalk/select/style . CSS )
上面element-ui是元件库名称，theme-chalk是元件库样式所在的文件夹名称，可以配置。button，select是组件名，lib是babel-plugin-component插件的默认文件夹。
webpack实现可按需引入的组件库
首先在npm init处创建项目。因为每个组件都是单独封装的，所以每个组件都导出一个函数，然后在Vue.use()的时候执行这个函数，完成组件的全局注册。项目目录结构如下
components/navbar/navbar.vue
模板
div class= header _ _ all { text } }/div
/模板
脚本
导出默认值{
名称：导航条，
道具：{
文本：字符串
}
};
/脚本
style rel= style sheet/scss lang= scss 范围。header__all{
背景色：# 000000；
颜色：# FFFFFF
显示器：flex
justify-content:居中；
对齐-项目：居中；
高度：50px
宽度：100%；
}
/风格
components/navbar/index.js
从导入导航栏。/navbar . vue ；
导出默认函数(Vue) {
Vue.component(navbar.name，navbar)；
}
src/index.js
从导入导航栏。/组件/导航栏
功能安装(Vue){
Vue.use(导航条)
}
如果(窗窗。Vue) {
Vue.use(安装)
}
导出默认安装
接下来就是使用webpack打包
第一步：先安装所有需要用到的依赖NPM I-D web pack web pack-CLI babel-loader @ babel/core @ babel/preset-env babel-plugin-component clean-web pack-plugin CSS-loader mini-CSS-extract-plugin node-sass post CSS-loader autoprefixer CSS nano sass-loader terser-web pack-plugin vue-loader vue-template-compiler
第二步：配置网络包。配置。js const path=require( path )
const terser plugin=require( terser-web pack-plugin )；
const { CleanWebpackPlugin }=require( clean-web pack-plugin )
const { VueLoaderPlugin }=require( vue-loader )
const minicsextractplugin=require( mini-CSS-extract-plugin )
模块。导出={
模式："无",
条目：{
导航条":"。/src/components/navbar/index。js ，
navbar.min : ./src/components/navbar/index。js ，
测试库":"。/src/index.js ，
test-lib.min : ./src/index.js
},
输出：{
path: path.join(__dirname，/lib )，
文件名：[名称]。js ，
库目标：“umd”，
库："[名称]",
库导出："默认"
},
//外部：[],
优化：{
最小化：真，
最小化：[
新的TerserPlugin({
测试：/\。最小\。js$/，
}),
],
},
模块：{
规则：[
{
测试：/\。vue$/，
使用：[vue-loader]
},
{
测试：/\。css$/，
使用：[minicsetractplugin。loader， css-loader ， postcss-loader]
},
{
测试：/\。s[ac]ss$/i，
使用：[minicsetractplugin。loader， css-loader ， postcss-loader ， sass-loader]
},
{
测试：/\。js$/，
排除：/node_modules/，
使用：{
装载机："巴别塔装载机",
选项：{
cacheDirectory: true
}
}
}
]
},
插件：[
new VueLoaderPlugin()，
新的CleanWebpackPlugin()，
新的minicsetractplugin({
文件名： lib-style/[name]. css
})
]
}
第三步：更改package.json的主要的字段，并往剧本里添加打包命令主":"。/lib/test-lib.min.js ，
脚本:{
生成“:”web包-配置web包。配置。js
}
第四步：执行新公共管理运行构建打包组件库，成功后项目多了个解放运动文件夹，存放打包后组件库的代码。解放运动文件夹里每个文件都有一个对应的。部文件，部文件分别用terser-网络包-插件插件和cssnano压缩。
调试组件库
有两种方式可调试本地的组件库
新建test.html，然后以武埃利新建个测试项目，然后通过npm link的方式链接到测试项目中去使用这里展示就使用最粗暴的方式一，新建test.html，npm链接各位看官老爷可以自己去尝试下。
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
链接版本=样式表href= ./lib/lib样式/test-lib。量滴CSS rel=外部无跟随
/头
身体
div id=应用程序
导航条text= header /导航条
/div
/body
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
脚本src= ./lib/test-lib.min.js/script
脚本
新Vue({
埃尔： #app
})
/脚本
/html
测试结果：
到这一步，至少说明代码构建没什么大问题，但按需引入功能还没验收，接下来我们就继续把组件库发布到新公共管理上，完全效仿元素-用户界面的使用方式在武埃利项目中使用，看看实现的效果如何。
npm 发布
步骤非常简单，只需4步
在新公共管理官网注册账号并验证邮箱。在命令行中输入新公共管理登录完成登录。如果新公共管理使用的是淘宝镜像源，需要切回新公共管理源。进入需要发布的项目目录执行新公共管理发布发布。完成后，接着就在测试项目里新公共管理安装安装我们自己的组件库。
调试组件库按需引入
在测试项目里的babel.config.js，添加巴别塔插件组件配置，并重启项目。
巴别塔插件组件基本配置参考
//babel.config.js
模块。导出={
预置：[ @ vue/CLI-plugin-babel/preset ]，
插件：[
[
成分，
{
libraryName: element-ui ，
样式库名称："主题-粉笔"
},
元素-用户界面
],
[
成分，
{
库名："测试库",
样式库：{
name: lib-style ，//与样式库名称相同
base: false //如果主题包有base.css
}
},
测试库
],
]
};
在测试。某视频剪辑软件中使用组件库
模板
差异
navbar :text=msg/navbar
埃尔按钮类型= primary class= DG-margin-t-20 元素按钮/el按钮
/div
/模板
脚本
从“Vue”导入Vue
从" juejintest-lib "导入{ navbar }；
从"元素-用户界面"导入{ button }；
Vue.use(导航条)
Vue.use(按钮)
导出默认值{
数据：函数(){
返回{
消息："文本"
}
}
};
/脚本
样式lang=scss 。DG-保证金-t-20型
边距-顶部：20px
}
/风格
到此按需引入的某视频剪辑软件组件库我们就构建完成了。文中使用工具做为构建工具，其实工具一般都用来构建应用项目，构建公共库的话，用得更多的是汇总，等我卷曲更熟悉的时候再用卷曲实现一次，下次见。
总结
到此这篇关于工具如何打包一个按需引入某视频剪辑软件组件库的文章就介绍到这了，更多相关工具打包按需引入某视频剪辑软件组件库内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。