微信小程序開發(fā)目前主要還是依賴小程序原生開發(fā)者工具，但開發(fā)者工具目前還不支持常用的less、sass樣式編譯，以及環(huán)境變量配置等功能。使用webpack就可以彌補這些問題。

思路

webpack啟動后，通過webpack-shell-plugin-next包執(zhí)行啟動后的一些配置

項目結構

scripts目錄存放的是webpack執(zhí)行后的配置

src目錄存放微信小程序代碼

index.js是webpack入口文件，無實際業(yè)務作用

webpack.config.js是webpack啟動的默認執(zhí)行文件

文件代碼

package.json

scss2wxss：在scss文件同級編譯scss為wxss

wxss-cli：在scss文件同級編譯less為wxss

{
  "name": "webpack-mini-program",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "author": "bucong",
  "license": "ISC",
  "devDependencies": {
    "scss2wxss": "^1.0.2",
    "webpack": "^5.88.0",
    "webpack-cli": "^5.1.4",
    "webpack-shell-plugin-next": "^2.3.1",
    "wxss-cli": "^1.0.4"
  }
}

webpack.config.js

// webpack執(zhí)行后，執(zhí)行shell腳本插件
const WebpackShellPluginNext = require('webpack-shell-plugin-next');

module.exports = {
  entry: "./index.js", // 指定入口文件，webpack必須配置入口文件，否則無法打包,配置一個空文件即可
  mode: 'none', // 設置默認mode，如果不設置webpack會報警告，也可以根據(jù)需要設置 development、production
  plugins: [
    // 在構建完后，使用 Webpack Shell 插件讀取和修改你的 JS 文件
    new WebpackShellPluginNext({
      // 你要運行的任何 shell 命令都可以在這里配置（例如 node.js 腳本）
      onBuildEnd: {
        scripts: [
          'node ./scripts/update-file.js', // update-file.js配置了修改小程序環(huán)境變量的功能
          'npx scss2wxss', // 使用 scss2wxss 將scss文件轉(zhuǎn)換為wxss文件
          // 'wxss ./src' // 使用 wxss-cli 將less文件轉(zhuǎn)換為wxss文件
        ],
        blocking: false,
        parallel: true
      }
    })
  ]
};

scripts/update-file.js

const fs = require('fs');
const path = require('path');

// 獲取命令傳入的環(huán)境變量 npm run build --env=test
const env = process.env.npm_config_env || 'dev';

// 需要修改的json文件
const jsonPath = path.resolve('./src/project.config.json');
fs.readFile(jsonPath, 'utf-8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  // 先解析json為對象
  const json = JSON.parse(data);
  // 修改對應字段的value值（根據(jù)環(huán)境修改對應小程序的appid）
  if (env === 'pd') {
    json.appid = 'pdAppId';
  } else if (env === 'test') {
    json.appid = 'testAppId';
  } else {
    json.appid = 'devAppId';
  }

  fs.writeFile(jsonPath, JSON.stringify(json, null, 2), (err) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log('update-json.js > JSON 文件已更新');
  });
});


// 需要修改的js文件
const jsPath = path.resolve('./src/config/env.js');
fs.readFile(jsPath, 'utf-8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  // 修改文件內(nèi)容
  const key = 'env'; // 對象的key或者變量名
  const newValue = env; // 替換后的值
  // 正則匹配對象的key，將文件中key為env的值改為命令傳入的環(huán)境變量，示例：{ env: 'dev' }
  // const pattern = new RegExp(`(${key}:\\s*['"])\\w+(['"])`);

  // 正則匹配變量賦值，將文件中變量名為env的值改為命令傳入的環(huán)境變量，示例：const env = 'dev'
  const pattern = new RegExp(`(${key} =\\s*['"])\\w+(['"])`);

  // 替換對應的值
  const newData = data.replace(pattern, `$1${newValue}$2`);

  fs.writeFile(jsPath, newData, (err) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log('update-json.js > JS 文件已更新');
  });
});


// 替換文件全部內(nèi)容
const indexPath = path.resolve('./index.js');
// index.js的文件內(nèi)容為一個console
const indexData = `console.log('indexData')`;
fs.writeFile(indexPath, indexData, (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log('update-json.js > JS 文件已更新');
});

通過webpack修改的文件

src/config/env.js

// 環(huán)境變量，通過webpack修改js內(nèi)容，更新env的值
const env = 'dev';

// 各環(huán)境配置
const envConfig = {
  dev: {
    baseUrl: 'http://dev.base.com',
    ossUrl: 'http://dev.oss.com'
  },
  test: {
    baseUrl: 'http://test.base.com',
    ossUrl: 'http://test.oss.com'
  },
  pd: {
    baseUrl: 'http://pd.base.com',
    ossUrl: 'http://pd.oss.com'
  }
};

// 導出對應環(huán)境的配置項
export default envConfig[env];

project.config.json

{
  "description": "項目配置文件",
  "packOptions": {},
  "setting": {},
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "wx6dd8sads8adysad8ase2", // 通過webpack修改json內(nèi)容，更新appid的值
  "projectname": "miniprogram",
  "condition": {},
  "editorSetting": {}
}

啟動命令

// 命令添加env參數(shù)，test、dev、pd
npm run build --env=test

啟動后，命令窗口會繼續(xù)監(jiān)聽scss、less文件變更，熱更新到對應wxss文件文章來源地址http://www.zghlxwxcb.cn/news/detail-503462.html

到了這里，關于webpack編譯微信小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！