如何在ES6中以原始形式导入JS文件？附示例及报错求助

先回顾你原本用require实现的原始导入写法：

const SigninExampleSource = require('!!raw!../examples/Signin');

这里的!!raw!是webpack的内联loader语法，!!表示跳过所有默认配置的loader，只使用后面的raw-loader把文件内容以纯字符串形式导入。

你尝试用ES6 import语法时遇到了模块解析失败的问题（从截图能看到你写了import SigninExampleSource from '!!raw!../examples/Signin'但webpack报错无法解析），下面给你几种可行的解决方案：

方案1：适配webpack 5+的内置模块类型 #

webpack 5已经把raw-loader的功能内置为asset/source模块类型，不需要额外安装raw-loader，你可以把导入语句改成：

import SigninExampleSource from '!!../examples/Signin?raw';

这里的?raw是告诉webpack把该文件当作原始字符串导入，!!同样起到跳过其他默认loader的作用，和原来require写法的效果完全一致。

方案2：通过webpack全局配置简化导入 #

如果你不想每次都写内联语法，可以在webpack配置文件里添加一条规则：

module.exports = {
  module: {
    rules: [
      {
        // 匹配你要导入的文件类型，可根据需求调整test范围
        test: /\.js$/,
        // 当导入路径带?raw参数时触发该规则
        resourceQuery: /raw/,
        type: 'asset/source',
      },
    ],
  },
};

之后导入时只需要写：

import SigninExampleSource from '../examples/Signin?raw';

就能拿到文件的原始字符串内容了。

方案3：针对webpack 4及以下版本（需安装raw-loader） #

如果你的项目还在用webpack 4，首先要安装raw-loader：

npm install raw-loader --save-dev
# 或者用yarn
yarn add raw-loader --dev

然后导入语句要写全loader的完整名称，不能只写raw：

import SigninExampleSource from '!!raw-loader!../examples/Signin';

之所以require写法能生效而import不行，主要是因为webpack对两种导入语法的内联loader解析逻辑有细微差异，再加上webpack版本升级后内置了raw-loader功能，写法上也有了变化。

内容的提问来源于stack exchange，提问作者gpbaculio