老项目多页面打包,配置环境变量,打包模式

多页面打包

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" // 可以开启测试环境服务
  }
  1. 第二步增加 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,
  },
};
  1. 这样 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 这个插件里面增加)

发表评论

邮箱地址不会被公开。 必填项已用*标注