gulp + webpack: webpack-stream 多项目整合环境搭建demo

最近越看项目越不顺眼，流程和打包实在太老了，用node8以上的版本无法识别gulp，打包后的代码也没有压缩，页面也没有source指引，html手动更换链接等等。。。
so，下决心把这块儿升级一下
原本的node版本也太低，这次一起升，下载node.js。。。

有兴趣的可以在github下载试试，一起交流。

因为用惯了之前的gulp流程化，加上项目的多入口多出口，这次决定还是继续gulp+webpack。查了一下现在已经不是gulp-webpack了，而是webpack-stream，本次gulp只作为任务流，主要还是webpack，配置来了

先看最终效果图

文件结构

多个项目整合在一起，要分开单独打包，感觉还是用gulp来执行webpack更合适一点，个人理解而已。

package.json

以下就是所有的依赖了，这里没什么好说的，要什么就install什么
下面的 browserslist 是为css自动添加前缀用的
-2020.5.27 更新-
-2020.6.8 更新-
-2020.6.18 更新-

{
   
  "name": "webpack-stream",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "keywords": [],
  "author": "JackSY",
  "license": "ISC",
  "devDependencies": {
   
    "@babel/core": "^7.9.6",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-transform-object-assign": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.9.6",
    "@babel/runtime": "^7.4.4",
    "@babel/runtime-corejs2": "^7.4.4",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-dynamic-import-webpack": "^1.1.0",
    "babel-plugin-lodash": "^3.3.4",
    "clean-css": "^4.2.3",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "cssnano": "^4.1.10",
    "eslint": "^7.1.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-flowtype": "^5.1.3",
    "eslint-plugin-html": "^6.0.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.2.2",
    "file-loader": "^6.0.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "gulp": "^4.0.2",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "image-webpack-loader": "^6.0.0",
    "less-loader": "^6.1.0",
    "lodash": "^4.17.15",
    "lodash-webpack-plugin": "^0.11.5",
    "mini-css-extract-plugin": "^0.9.0",
    "node-notifier": "^7.0.1",
    "node-sass": "^4.14.1",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "uglify-js": "^3.9.3",
    "url-loader": "^4.1.0",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.2",
    "vue-router": "^3.3.2",
    "vue-server-renderer": "^2.6.11",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "vuex": "^3.4.0",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-stream": "^5.2.1"
  },
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
}

webpack.dev.conf.js

开发模式已经添加了devServer，在gulp中动态添加，可以及时响应更改，而无需一遍又一遍地打包
-2020.5.27 更新-
-2020.6.8 更新-
-2020.6.18 更新-

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
const LodashWebpackPlugin = require("lodash-webpack-plugin");
const notifier = require("node-notifier");
const InsertHtmlPlugin = require("./public/insert-html-code-plugin");
const statistics = require("./public/statisticsTemplate");

module.exports = {
   
  mode: "development"