目前没有配置加载器来处理这个文件表单 vuepress答案

【问题标题】：currently no loaders are configured to process this file form vuepress目前没有配置加载器来处理这个文件表单 vuepress
【发布时间】：2020-04-27 16:35:32
【问题描述】：

我要导入第三方库去了我用的是vuepress。我应该配置一个规则来编译 node_modules js 文件。但它不起作用。

喜欢这个

demo.vue

<template>
  <DatePanel/>
</template>

<script>
import DatePanel from 'element-ui/packages/date-picker/src/panel/date-range.vue';

export default {
  name: 'date-pick',
  components: {
    DatePanel
  }
}

</script>

docs/.vuepress/config.js

module.exports = {
  // here is my config
  chainWebpack: (config, isServer) => {
    config.module
      .rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('node_modules/element-ui/packages'))
      .add(resolve('node_modules/element-ui/src'))
      .end()
      .exclude
      .add(resolve('node_modules/element-ui/src/utils/date.js'))
      .end()
      .use("babel-loader")
      .loader('babel-loader')
      .tap(options =>
        merge(options, {
          presets: [
            '@vue/app'
          ]
        })
      );
  }
}

开发工具错误表单

main.js:1 Uncaught Error: Module parse failed: Unexpected token (65:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     }, this.$slots.default);
|     const wrap = (
>       <div
|         ref="wrap"
|         style={ style }
    at eval (main.js:1)
    at Object../node_modules/element-ui/packages/scrollbar/src/main.js (app.js:4201)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (index.js?2020:1)
    at Module../node_modules/element-ui/packages/scrollbar/index.js (app.js:4190)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (cjs.js?!./node_modules/@vuepress/core/node_modules/vue-loader/lib/index.js?!./node_modules/element-ui/packages/date-picker/src/basic/time-spinner.vue?vue&type=script&lang=js&:3)
    at Module../node_modules/@vuepress/core/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vuepress/core/node_modules/vue-loader/lib/index.js?!./node_modules/element-ui/packages/date-picker/src/basic/time-spinner.vue?vue&type=script&lang=js& (app.js:1520)

如何配置chainWebpack，如何解决这个问题。

【问题讨论】：

标签： javascript vue.js webpack vuepress

【解决方案1】：

第一步

在vue.config.js中添加加载器配置

  chainWebpack: (config) => {
    config.output.filename("[name].[hash:8].js");
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) =>
      addStyleResource(config.module.rule("scss").oneOf(type))
    );
    config.module
      .rule("thejs")
      .test(/\.js$/)
      .include.add(path.resolve("src"))
      .add(path.resolve("node_modules/element-ui/packages"))
      .end()
      .use("babel-loader")
      .loader("babel-loader")
      .end();
  },

第 2 步

安装这两个包来编译JSX

babel-helper-vue-jsx-merge-props & babel-loader

第 3 步

将babel.config.js文件添加到根目录

同时添加以下代码

module.exports = {
  presets: ["@vue/app"],
};

别忘了重启应用

【讨论】：