多页面打包
webpack 多打包
经过三天的努力,终于完成了!下面就开始介绍
首先我们先介绍为什么用 webpack,webpack可以为老项目带来什么
- 我们的目标是,不用手动改配置,因为像老的项目,环境又多,技术又老旧。为了完成我的重构大计划,首先先节省不必要的时间,方便我们开发的同学从此不在纠结环境的问题,也方便自己,为了不出现之前的问题,第一步增加打包编译,配置文件就教给机器
- 开始规划,我们项目目录结构不能变,因为嵌套在 App 里面,随意改动原生获取不到文件(痛苦啊)
- 第一步想要之前的目录结构,单页面,完成的按照之前的结果输出
- 第二步增加环境变量,只需要一条命令可以解决,可以解决 一堆文件的配置
- 第三步可以增加压缩代码,增加代码混淆,增加 less ,sacss 等
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" // 可以开启测试环境服务 }
- 第二步增加 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, }, };
- 这样 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 这个插件里面增加)