hanfengv/wx-test

小程序 webpack5 工程化

创建一个小程序项目

创建一个 src 目录并将下面的文件移动到 src 下

app.js app.json app.wxss components pages sitemap.json utils

安装 webpack

npm init -y
npm install webpack webpack-cli --save-dev

npm install copy-webpack-plugin --save-dev

配置 webpack

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    clean: true,
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        // fast-glob 语法; 匹配src目录（任何嵌套级别）中的所有文件 https://github.com/mrmlnc/fast-glob#pattern-syntax
        from: "**/*",
        to: "./",
      },
    ]),
  ],
  mode: "none",
};

配置开发者工具小程序入口

// project.config.json
{
  "description": "项目配置文件",
  "miniprogramRoot": "dist/",
}

运行成功

npx webpack

上面的步骤作用:

1. 将 src 中的文件复制到 dist;
2. src/app.js -> dist/main.js
3. 让微信开发者工具知道, dist 才是我们要发布的代码

使用 webpack bable-loader 解决 npm 的依赖问题

参考 babel-loader

npm i moment lodash
// 使用 babel-loader 处理 js 依赖问题
npm install -D babel-loader @babel/core @babel/preset-env webpack

// .babelrc
{
  // https://babeljs.io/docs/en/babel-preset-env
  // 此配置 允许您使用最新的 JavaScript，使 JavaScript 包更小！
  "presets": ["@babel/env"]
}

手动置入口文件

entry: {
    "app": "./app.js",
    "pages/index/index": "./pages/index/index.js",
    "pages/logs/logs": "./pages/logs/logs.js",
    "components/search-bar/search-bar": "./components/search-bar/search-bar.js",
    "components/test-component/test-component": "./components/test-component/test-component.js",
},

通过写一个 webpack 插件来 自动处理入口文件依赖