基于webpack4的前端多入口架构方案，multi entry packaging for front end based on Webpack4
npm install jay-webpack-scaffold
yarn global add webpack-scaffold-cli;
jay-webpack init ;
关于前端工程化
前端野蛮生长的时代已经过去了。随着前端的发展，越来越复杂的业务，各种各样的插件模块依赖关系，项目复杂度的提升，开发成本越来越高。webpack就是解决了这一系列的问题。你可以利用webpack管理各种资源，也可以提前享受es6语法的便利，也可以规范成员之间的开发规范，等等。功能列表
1. 模块化管理资源文件，解析编译ES6语法
2. 使用jslint，强制校验js语法，规范js书写规则，并自动修复部分语法格式问题
3. 使用styleLint，强制校验css,less语法，规范书写css,less规则
4. 编译less文件，自动添加浏览器前缀
5. 压缩js,css文件
6. 使用PurifyCSS、OptimizeCssAssets，去除多余css(未被使用)，减少css大小，优化css结构，减少50%-80%的文件大小
7. 支持iconfont字体文件
8. 自动引入html5shiv、respond，兼容h5标签以及响应式
9. 支持vue库和element组件库
10. 以contenthash值，生成文件名，用于更新浏览器缓存
11. 多线程打包加载资源，加快编译速度下载依赖
yarn add jay-webpack-scaffold
配置文件
cp ./node_modules/jay-webpack-scaffold/webpack/config.dist.js ./webpack-config.js
根据需求调整相应目录$3
entry: 需要编译输出的js 根路径
output: 输出的路径
mainJs: 全局使用的js文件路径
lessPath: 需要编译输出的less 根路径，该目录下，都会被编译输出
publicPath: 开发环境下，使用路径
author: 作者名称
removePattern: 不需要被输出的文件路径 正则表达式，例如 /^\/css\/.*\.js?$/，表示css目录下的所有js文件都不输出（当less作为入口文件时，会输出js文件）
purifyCssPaths: 被使用到css的所有文件地址，如html页面和js，它会过滤除了这些被使用的css样式
copyLibs: 需要拷贝的类库，可以拷贝目录，也可以拷贝单独文件
alias: 引用别名，加快编译速度
libs: js类库目录，每个文件都会单独输出，可以对已有的类库模块封装输出
serverPort: 服务端口,
assetPath: 资源路径与contenthash值对应关系（默认生成json，便于服务端渲染引用地址）
assetJs: 是否生成js（可以被前端使用）
纯前端如何利用hash，生成资源路径
服务端如何利用hash，生成资源路径
//配置文件 assetJs参数设置为 false
//node
require('/dist/webpack.assets.json');
代码格式化配置
$3
./node_modules/.bin/eslint --init
修复js代码格式
./node_modules/.bin/eslint --fix filepath
规则列表：https://eslint.org/docs/rules/$3
项目根目录 .stylelintrc
{
"extends": "stylelint-config-standard"
}
忽略文件配置 .stylelintignore
规则列表：https://stylelint.io/user-guide/rules/开发说明
规范：
1. 默认加载全局的css和js文件，每个页面单独具有一个css文件和js文件
2. 配置参数lessPath，该目录下的每个less文件都会默认编译输出成css文件，被每个页面使用
3. 配置参数entry，目录下的index.js命名的文件将会作为编译输出
4. 配置参数mainJs, 全局加载的js
5. 由于PurifyCSS（过滤html和js中未被使用到的样式）过滤了未被使用的css样式，导致在页面中使用新的样式不生效（因为webpack没有监听html文件的变化，这时你需要重启服务）命令(scripts)
"scripts": {
"build": "NODE_ENV=production settingPath='/webpack-config.js' webpack --config '/node_modules/jay-webpack-scaffold/webpack/webpack.js'",
"dev": "NODE_ENV=development settingPath='webpack-config.js' webpack-dev-server --config '/node_modules/jay-webpack-scaffold/webpack/webpack.js'",
}
你也可以这样使用
webpack.config.js
const webpackConfig = require('jay-webpack-scaffold');
module.exports = webpackConfig;
// 可以自主配置loadeer，plugin，及其他参数
package.json
"scripts": {
"build": "NODE_ENV=production settingPath='/webpack-config.js' webpack --config 'webpack.config.js'",
"dev": "NODE_ENV=development settingPath='webpack-config.js' webpack-dev-server --config 'webpack.config.js'",
}
本地开发环境执行以下命令：
npm run dev
它将会文件生成好，放入内存中。自动监听文件变化
生产环境执行以下命令：
npm run build
它将会生产静态资源文件到你定义的目录下项目中使用
$3
location ~ ^/dist {
if (-f $root_dir/dev.lock){
proxy_pass http://127.0.0.1:8082;
}
}
任何/dist/* 的请求，都会代理到http://127.0.0.1:8082，根据不同需求相应配置异常情况
$3
1. 有可能依赖没有下载完成，执行yarn
2. 有可能端口被占用 执行以下命令
lsof -i:8082 （查看占用端口进程）
kill -9 PID (pid 为进程id号)