文件处理
html-loader将多个html文件合并到index.html模板
-
安装html-loader(低版本)
npm i html-loader@1.3.2 -
index.html中ejs模板语法引入其它html文件
<body> <%=require('html-loader!../../page_cover.html')%> <%=require('html-loader!./mario.html')%> <%=require('html-loader!../../page_mask.html')%> </body>
此时执行打包命令，输出合并后的模板文件；
注：对于html-loader合并进来的html，html-webpack-plugin声明的变量无法注入；因此我们可以借助html-loader的预处理钩子配合art-template手动注入
-
安装art-template并引入
-
配置html-loader的参数preprocessor预处理
rules: [ { test: /\.html/i, exclude: /index\.html/i, // 不读取index.html use: { loader: "html-loader", options: { preprocessor: (content, loaderContext) => { let result; try { result = art.compile(content)({ base: "192.168.4.43" // 注入变量base }); } catch (error) { loaderContext.emitError(error); return content; } return result; }, } } } ]
环境变量
向 process.env 注入.env声明变量
dotenv
支持读取 .env 配置文件
npm i dotenv --save-dev
编写 .env 环境变量文件
------ .env.development ------
resUrl=http:192.168.3.43:8080
------ .env.production ------
resUrl=https://www.api.com
------ .env ------
...
cross-env
设置执行环境（兼容多系统/环境）
npm i cross-env -S
新增 scripts 命令
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --useLocalIp --config ./build/webpack.dev.conf.js",
"build:pro": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.conf.js"
}
注入
webpack.config.js：根据当前执行环境注入对应环境变量
const dotenvFile = path.resolve(__dirname, `../.env.${process.env.NODE_ENV}`);
require('dotenv').config({
path: fs.existsSync(dotenvFile)
? dotenvFile
: path.resolve(__dirname, `../.env`),
});
nodeJs：入口文件注入到全局
//index.js
require("dotenv").config({ path: `./.env.${process.env.NODE_ENV}` });
console.log(process.env.VAR);
批量引入
webpack支持require.context("目录",是否读取子级目录下文件,文件匹配表达式 )方法批量引入模块
以Vuex store.modules批量引入实现为例
// store/index.js
// modules目录下
const modulesFiles = require.context("./modules", false, /\.js$/);
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
new RegExp(/^\.\/(.*)\.\w+$/).test(modulePath);
let name = RegExp.$1;
let module = modulesFiles(modulePath);
modules[name] = module.default;
return modules; // { 文件名变量: model, ... }
}, {});
