3. 「uniapp 如何支持微信小程序环境开发」配置项简化到可以让你一盔全貌之：loader + plugin

{
    test: /\.vue$/,
    use: [
        {
            loader: 'vue-loader',
            options: {
                compiler: require('./uni-template-compiler'),
                compilerOptions: { // 这里你可以先忽略，后面会单独小节分析
                    mp: {
                        platform: "mp-weixin",
                        scopedSlotsCompiler: "auto",
                    },
                    filterModules: {},
                    filterTagName: 'wxs',
                },
            }
        },
    ]
},

const { VueLoaderPlugin } = require('vue-loader')
new VueLoaderPlugin(),

options: {
    compiler: require('./uni-template-compiler'),
    compilerOptions: {
        mp: {
            platform: "mp-weixin",
            scopedSlotsCompiler: "auto",
        },
        filterModules: {},
        filterTagName: 'wxs',
    },
}

// node_modules/vue-loader/lib/loaders/templateLoader.js

module.exports = function (source) {
    //...
    const compiler = options.compiler || require('vue-template-compiler')
    
    const compilerOptions = Object.assign({...}, options.compilerOptions, {...})

  // for vue-component-compiler
  const finalOptions = {
        source,
        filename: this.resourcePath,
        compiler,
        compilerOptions, ...
    }
    //...
    const compiled = compileTemplate(finalOptions)
    //...
    const { code } = compiled

    // finish with ESM exports
    return code + `\nexport { render, staticRenderFns }`
}

<template>
  <div class="global-compo">  
    全局组件: {{ name }} <br />
    属性值: {{ content }}
  </div>
</template>

<view class="global-compo _div">
    {{'全局组件: '+name+''}}
    <view class="_br"></view>
    {{'属性值: '+content+''}}
</view>

// loader配置
{
    test: /\.css$/i,
    use: [MiniCssExtractPlugin.loader, "css-loader"],
},

// plugin
new MiniCssExtractPlugin({filename: "[name].wxss"}),

// 我们demo中的 src/main.js 文件 注册的全局组件为例
import globalCompo from './components/global-compo.vue'
Vue.component('global-compo', globalCompo);

import('./components/todo-item.vue' /* webpackChunkName: "components/todo-item" */)

require.ensure([], () => resolve(require('./components/todo-item.vue')), 'components/todo-item')

// 全局组件注册方式如下：
// src/main.js
Vue.component()
// src/App.vue
export default {
    components: {}
}

// 局部组件注册方式如下
// .vue文件
export default {
    components: {}
}

{
    test: `${context}/main.js`,
    use: [
        {
            loader: path.resolve(__dirname, 'mp/main.js'),
            options: {
                bridge: path.resolve(__dirname, '../../runtime/uni-mp-weixin/index')
            },
        },
    ]
},
{
    resourceQuery: /vue&type=script/,
    use: [
        {
            loader: path.resolve(__dirname, 'mp/script.js')
        }
    ]
},

var todoItem = function(){
    import(.....)
}

const loaderUtils = require('loader-utils')
const processComponents = require('./babel/index');

// 暂时只解析 Vue.component('', todoItem) 写法
const traverse = require('./babel/global-component-traverse');

module.exports = async function (content) {
    this.cacheable && this.cacheable();
    if (this.resourceQuery) {
       //... 分析组件依赖，替换组件为动态导入，更新json.usingComponents
    } else {
        const options = loaderUtils.getOptions(this);
        // 注意通过?main让 src/main.js下次被解析是走上面的if分支
        return [`import Vue from 'vue'`, `import '${options.bridge}'`, `import '${this.resourcePath}?main'`].join('\n');
    }
}

resolve: {
    alias: {
        "vue$": path.resolve(__dirname, "../runtime/mp-vue/mp.runtime.esm.js")
    }
},

new webpack.ProvidePlugin({
    createApp:       [mpRuntime, 'createApp'],
    createComponent: [mpRuntime, 'createComponent'],
    createPage:      [mpRuntime, 'createPage'],
    uni:             [mpRuntime, 'default']
})