多页面打包

webpack 多打包

经过三天的努力，终于完成了！下面就开始介绍
首先我们先介绍为什么用 webpack，webpack可以为老项目带来什么

1. 我们的目标是，不用手动改配置，因为像老的项目，环境又多，技术又老旧。为了完成我的重构大计划，首先先节省不必要的时间，方便我们开发的同学从此不在纠结环境的问题，也方便自己，为了不出现之前的问题，第一步增加打包编译，配置文件就教给机器
2. 开始规划，我们项目目录结构不能变，因为嵌套在 App 里面，随意改动原生获取不到文件（痛苦啊）
3. 第一步想要之前的目录结构，单页面，完成的按照之前的结果输出
4. 第二步增加环境变量，只需要一条命令可以解决，可以解决 一堆文件的配置
5. 第三步可以增加压缩代码，增加代码混淆，增加 less ，sacss 等

1. 多页面打包

1. 首先安装 webpack ，我这里安装的是

   "devDependencies": {
   "clean-webpack-plugin": "^3.0.0", 
   "copy-webpack-plugin": "^8.1.0", // 多页面打包主要工具
   "cross-env": "^7.0.3", // 命令控制主要工具
   "glob": "^7.1.6", 
   "html-webpack-plugin": "^5.3.1",
   "mini-css-extract-plugin": "^1.4.0",
   "optimize-css-assets-webpack-plugin": "^5.0.3",
   "webpack": "^5.28.0",
   "webpack-cli": "^4.6.0",
   "webpack-dev-server": "^3.10.1" // 可以开启测试环境服务
   }

2. 第二步增加 webpack.config.js

   module.exports = {
   mode: "none",
   context: process.cwd(),
   entry: "xx/xx", // 入口文件最好是配置文件，方便环境变量
   output: {  // 出口配置
   path: 'xx',
   filename: "xxx", // 
   },
   plugins: [
   new webpack.DefinePlugin({
     "VERSION": JSON.stringify("5fa3b9"), // 此为环境变量
   }),
   new CopyWebpackPlugin({ // 下面是各个文件的输出，里面可以加入，混淆，压缩等操作
     patterns: [
       {
         from: path.join(__dirname, "app/static/"),
         to: "static",
       },
       {
         from: path.join(__dirname, "app/html/"),
         to: "html",
       },
       {
         from: path.join(__dirname, "app/static/images/"),
         to: "static/images",
       },
     ],
   }),
   ].concat(copyMultipleHtml(htmlArr)), // copyMultipleHtml 为个人封装入口配置文件自定义内容（不方便展示）
   devServer: { // 服务
   contentBase: path.resolve(__dirname, "dist"),
   host: "localhost",
   port: "8080",
   compress: false,
   },
   };

3. 这样 webpack 打包就完成了 ，目录输出完美，我们开始增加自己的东西了
   目前我们的命令是执行

   webpack

   就可以了，现在我们需要传入参数，增加环境变量，就需要 cross-env 这个插件，首先我们安装

   npm install cross-env --save-dev

   然后我们改变命令传入环境变量 package.json 改变命令

  "scripts": {
    "prd": "cross-env NODE_ENV=prd webpack"
  },

在 webpack.config.js 里面就可以通过 process.env.NODE_ENV 渠道 prd 的参数
我们就可以像些 js 或者 node 一样 增加判断就好了... （哈哈哈）

• 这样我们就可以在入口文件中增加 环境变量了（注：这样只能在入口文件增加的环境变量才起作用，负责需要在 CopyWebpackPlugin 这个插件里面增加）