自定义脚手架
webpack,项目结构,组件流程,按需加载实现
目录
项目创建
生成package.json:
npm init
webpack添加:webpack 是打包工具,它会根据代码的内容(js,css,图片及其他资源)解析模块依赖,帮助我们把多个模块的代码打包。
- webpack (.vue等其他文件需要loader解析成webpack可以打包的资源)
- webpack-cli 为webpack的依赖,4.X版本以后需要手动安装
- 添加webpack入口配置文件 webpack.conf.js
npm install --save-dev webpack webpack-cli
{
"scripts": {
"build": "webpack --config ./build/webpack.conf.js",
},
}
一、基本目录结构
不同webpack配置对应produce,dev环境
二、流程
1.webpack.conf.js
入口/src/index.js=》引入Button及其他组件=》loader处理=》输出output/.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'production',
entry: {
app: path.resolve(process.cwd(), './src/index.js'),
},
output: {
path: path.resolve(process.cwd(), './lib'),
// publicPath: '/dist/',
// filename: 'index.js',
// chunkFilename: '[id].js',
// libraryTarget: 'umd',
// libraryExport: 'default',
library: 'RICH',
// umdNamedDefine: true,
// globalObject: 'typeof self !== \'undefined\' ? self : this'
},
module: {
rules: [
{
test: /\.(jsx?|babel|es6)$/,
include: process.cwd(),
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
},//处理vue模板编译
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
],
},//处理.vue(less/css) 依赖less-loader
]
},
plugins: [
new VueLoaderPlugin()
]
};
处理资源 | 作用 | 依赖 | 备注 |
.js | 打包资源模块 | webpack,webpack-cli | webpack依赖webpack-cli |
.vue | 转换.vue文件 | vue,vue-loader, vue-template-compiler | |
.less | 转换.less文件 | less,less-loader,css-loader | .vue文件中style会被当做.less文件处理 |
jsx?|babel|es6 | babel-core,babel-loader,babel-preset-env |
2.组件
将单个组件嵌套汇总到src/index中
/packages/card/index.js
import card from './src/main.vue';
// 1. 无install:页面中直接引入,可以使用该组件/main.js引用,页面中无法使用
// 2. 有install:main.js引入,会执行install方法,可以将组件挂载在全局Vue,无需再其他页面引入
// 3. 有install:可以将插件挂载到全局Vue实例,包括directive,mixin
card.install = function (Vue, options) {
Vue.component(card.name, card);
};
export default card;
/src.js
import button from '../packages/button/index';
import card from '../packages/card/index';
exports.button = button;
exports.card = card;
3.包构建
/package.json
"scripts": {
"build": "webpack --config ./build/webpack.conf.js"
},
输出文件(当前只全量打包出单文件)
4.其他项目引入使用
1.页面级别引入(main.js引入,组件必须有install方法,将组件注册到vue实例)
2.项目级别引入(.vue文件中引入,组件可以无install方法)
//1.默认到node_modules查找包
//2.自动通过包的pacake.json中main找到入口引入
import { card } from 'comui';
//1.执行组件中的install方法
//2.通过Vue.componet(name,name)将component注册到vue实例
Vue.use(card);
总结
基础组件库,无开发模式,无组件预览,全量加载js文件,无按需加载。