webpack4-cli
Webpack4 + Vue/React + TS (SPA or MPA) + docker 面向实际工作流(开发 & 编译 & 打包 & 部署 & 上线)的脚手架，并提供docker镜像供快速构建。
请赐我一颗github小星星，以示鼓励：https://github.com/pomelott/webpack4-cli
webpack4-cli 基于webpack@4，此cli可提供:
- 更加灵活的、切近实际工作流的目录结构, 既可单页也可多页.
- 更全面的构建功能（runtime-chunk、postcss、sass、less、gulp图片压缩、bundle分析、TS、vue-ts、react等）.
- 更高的扩展性，构建目标html快速定义、重写机制、cdnURL定制等.
- 更活跃、稳定的更新等.
- 基于实际工作流（不拿实际需求Coding都是耍流氓）
- 提供 Docker Image 供快速构建
如果此cli帮助到您，欢迎给星，您的星星是我持续更新的动力！
快速构建
- 注：若不使用Docker，可跳过此项，直接进入快速使用。
拉取镜像
docker pull pomelott/webpack-cli
启动开发环境
注： 以下文件目录可在本机自行创建，能够提供文件夹供容器挂载即可。
- /Users/tate/Documents/work/geek/docker/ws/src: 用于存放资源文件，修改文件可验证启动热更新
- /Users/tate/Documents/work/geek/docker/ws/page: 用于存放html及入口构建相关文件
docker run -it -v /Users/tate/Documents/work/geek/docker/ws/src:/home/webpack4-cli/src -v /Users/tate/Documents/work/geek/docker/ws/page:/home/webpack4-cli/page -p 8090:8090 --env WEBPACK_MODE=dev pomelott/webpack-cli
在宿主机浏览器访问 localhost:8090/page/index.html 即可。
启动编译环境
- 启动容器在后台执行
docker run -itd pomelott/webpack4-cli /bin/bash
- 查看容器id
docker ps
- 执行构建
docker exec -it -w /home/webpack4-cli b7c2b83ed900 /bin/bash
- 导出build后文件
docker cp b7c2b83ed900:/home/webpack4-cli/dist ./
快速使用
- 下载依赖（建议yarn）
yarn install
or
npm install
- 开发模式
npm run dev
- 生产模式
npm run build
- bundle分析
npm run analyze
在实际工作中使用 & 自定义 HTML
cli将会根据pageDir路径，动态生成webpack entry，在源码中，一个页面就是一个文件夹。
首先介绍一个html文件夹下可以存放的三个文件：
- entry.js 为本页面的资源入口（无论使用哪种方式定制HTML，此文件都必须存在）
- param.js 为默认模板传递参数（如果你想快速定制HTML，这是个不错的选择）
- page.html 用于重写HTML，若此文件存在，cli将会将page.html的优先级提至最高，用以替代默认模板。
你可以通过以下两种方式自定义HTML：
如果param.js存在，cli则会将param.js中的参数与pug引擎模板结合产出对应HTML，entry.js中引入的资源（js,css）将会被通过标签插入至对应HTML中。
- param.js 中的配置项如下，你也可以通过快速查看demo中的代码例子 来快速上手：
Name Type Default Description title String ‘multipage-cli’ 标题内容 tag Object {meta: [],eadLink: [],headScript: [],bodyLink: [],bodyScript: []} 控制插入在html中的资源标签 tag.meta Array [] control meta tag tag.headLink Array [ ] control link tag in head section tag.headScript Array [ ] control script tag in head section tag.bodyLink Array [ ] control link tag in body section tag.bodyScript Array [ ] control script tag in body section vueInit Object {} 初始化vue根节点 vueInit.el String undefined vue根实例的el值，如”#app“ vueInit.entrance String undefined vue根实例的入口组件，可详见vue-demo reactInit Object {} 初始化react根节点 reactInit.el String undefined react根实例的el值，如”#root“ 可详见react-demo
// for detai code, you can view vueDemo in dev mode
module.exports = {
title: 'Example in multipage',
tag: {
meta: [{
name: 'pwebpack4-cli',
content: 'vueDemo'
}, {
name: "webpack4-cli",
content: 'https://github.com/pomelott/webpack4-cli'
}],
headLink: [{
rel: "icon",
type: "image/png",
href: 'https://vuejs.bootcss.com/images/logo.png'
},{
href: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css',
rel: "stylesheet"
}]
},
vueInit: {
el: '#app',
entrance: 'example'
}
}
<!doctype html>
<html lang="en">
<head>
<title>Example in Multipage</title>
<meta name="twebpack4-cli" content="vueDemo" />
<meta name="webpack4-cli" content="https://github.com/pomelott/webpack4-cli" />
<link rel="icon" type="image/png" href="https://vuejs.bootcss.com/images/logo.png" />
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://www.cdn-plugin.com/assets/css/entry/example/vueDemo.css?v=2466d76ff005024cce26">
</head>
<body>
<div id="app">
<div is="example"></div>
</div>
<script src="http://www.cdn-plugin.com/assets/js/runtime/runtime-vueDemo.js?v=2466d76ff005024cce26"></script>
<script src="http://www.cdn-plugin.com/assets/js/common/vendors.js?v=5b4f3badf8d6ddb0036f"></script>
<script src="http://www.cdn-plugin.com/assets/js/entry/example/vueDemo.js?v=8df1c19f97ce1a9abf72"></script>
</body>
</html>
使用page.html 意味着，完全的定制化，你需要完全重写HTML
在实际工作中使用 & 自定义env
在根路径的 cli-config.js 文件中自定义env,详细选项如下:
| Name | Type | Default | Description |
|---|---|---|---|
| dev.port | String | ‘8090’ | 开发环境端口 (这是8090的时代) |
| dev.host | String | ‘localhost’ | devServer host |
| dev.htmlAssetsAbsolutePath | Boolean|String | false | 控制dev环境下，编译后HTML中资源标签的根路径，如果为false则常规使用相对路径（dev一般使用相对路径） |
| build.htmlAssetsAbsolutePath | Boolean|String | false | 控制build环境下，编译后HTML中资源标签的根路径，一般以此来修改为服务器资源基础url或cdn-url |
提醒
- 你可以自定义你的page目录，可根据业务模块嵌套等等。并且输出的html目录也会动态变化。以下有个例子可以帮助您理解，您也可以在cli中尝试
Root
└───src
│———node_modules
|———page // html dir
| |———moduleOne
| | |———PageOne
| | | |———param.js
| | | └———entry.js
| | └———pageTwo
| | |———page.html
| | └———entry.js
| |———moduleTwo
| | |———PageThree
| | | |———param.js
| | | └———entry.js
| | └———pageFour
| | |———param.js
| | └———entry.js
输出路径也会自动变化（包括html和静态资源）
Root
|———dist // output root
| |——— js
| | |———common
| | | └——— vendor.js
| | |———entry // html unique chunk
| | | |——— moduleOne
| | | | |——— pageOne.js
| | | | └——— pageTwo.js
| | | └——— moduleTwo
| | | |——— pageThree.js
| | | └——— pageFour.js
| | └———runtime
| | |——— runtime-pageOne.js
| | |——— runtime-pageTwo.js
| | |——— runtime-pageThree.js
| | └——— runtime-pageFour.js
| |——— css
| | |——— ... // css dir is the same as js
| | ...
- src/assets路径用以存放静态文件，例如txt文档等，此路径下的文件将不会被打包，并会原样输出至dist下。
- 你可以在gulpfile下手动选择压缩插件，通常默认选项就可满足需要。
- 你可以再 postcss.config.js中自定义, 现在, autoprefixer 已被配置.
- 注意你的环境版本,
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ioFpUjs-1596028382886)(https://img.shields.io/badge/node-v10.8.0-green)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ju0luxLD-1596028382888)(https://img.shields.io/badge/npm-v6.2.0-green)]
- 建议使用yarn安装模块包，这将会让你在多人项目中减少因版本不一致带来的问题。
核心插件
希望在以下插件中得到更多支持，欢迎给星：
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
