1.1.5 • Published 4 years ago
maxy-webpack-lib v1.1.5
Webpack项目开发脚手架(Vue或React可选)
简介
该项目是一个即开即用的Webpack项目开发脚手架,支持Vue和React项目。用户通过安装maxy-webpack-lib包,按照一定的目录结构来构建项目,即可快速搭建项目,投入到开发工作中。类似于vue-cli或create-react-app,用户可以自由选择选择哪种框架来开发项目。
目标
- 快速初始化项目,减少开发前的准备工作。
- 支持Vue和React项目自由选择。
- 支持自定义传入Webpack配置。
用法
安装
## 前置依赖 webpack-dev-server。确认当前项目安装了此依赖,如果没有,请运行: yarn add webpack-dev-server -D ## 或者 npm i webpack-dev-server -D yarn add maxy-webpack-lib -D ## 或者 npm i maxy-webpack-lib --save-dev
创建如下的项目结构:
// | build // --- index.js 构建配置入口 // --- dev.js // --- prod.js // | src // --- pages // ------ index // --------- index.html // --------- index.less (可选) // --------- index.js // | .babelrc react项目中需要额外引入 @babel/preset-react, 其余情况下要有@babel/preset-env // | package.json
引入项目
// build/index.js const WebpackConfig = require('maxy-webpack-lib'); const config = { type: 'react', // 或者vue,默认为react 标识项目是用react还是vue useLibCdn: true, // 或false, 默认为true 项目中依赖库是否引用默认的cdn资源。在项目打包时,会自动将vue或者react及react-dom这样的核心库替换成cdn资源,如果不需要,可将此项置为false mobile: false || { remUnit: 75, // 由开发者根据设计稿和项目来定。表示html中1rem代表多少像素 remPrecision: 6 // 在px转rem过程中保留几位小数 }, // 配置移动端项目px转rem。如果不是移动端项目或者有自己的移动端配置,可将此项置为false。配置此项后,在项目中出现的px会按照配置转换成rem libCdnConfig: { js: [], // 参照 html-webpack-tag-plugin中scripts配置(https://www.npmjs.com/package/html-webpack-tags-plugin) css: [], // 参照 html-webpack-tag-plugin中links配置(https://www.npmjs.com/package/html-webpack-tags-plugin) } // 配置额外的cdn资源。在打包时引用到的资源不会被打包进代码中,而是采用线上cdn资源。 } module.exports = WebpackConfig(config, (mode, curConfig) => { // mode: development 或 production,代表当前是开发模式还是生产模式 // config: 当前配置信息 // return object; 返回的是webpack的配置信息,该返回会通过webpack-merge合并到现有配置中,用于用户自定义一些webpack配置。 return { plugins: [], resolve: {} } }) // build/dev.js const { WebpackDev } = require('./index'); module.exports = WebpackDev; // build/prod.js const { WebpackProd } = require('./index'); module.exports = WebpackProd;
在package.json中添加scripts开发和打包命令
// package.json { "scripts": { "dev": "webpack-dev-server --config ./build/dev.js", "build": "webpack --config ./build/prod.js" } }
在.babrlrc中引入babel的插件
{ "presets": [ "@babel/preset-env" ] } // 在type为react或者未配置时需要加上@babel/preset-react。其它的babel配置,按需引入。同时不要忘了安装对应的依赖哦。
创建完成。现在就可以通过yarn dev或者yarn build来体验了。