Webpack plugin raw-loader, which can export code files as string templates

A loader for webpack that allows importing files as a String.

A loader for webpack that allows importing files as strings.

• The file types of this test include .vue, .txt, and .jsfiles
• Note that it must be Webpack 4.x or 5.x
• Github address
• Installnpm i raw-loader -D
• There are two ways to use importandrequire

use

import method

Add before theme file path!!raw-loader!

import vueStr from '!!raw-loader!./slider.vue'
import txt from '!!raw-loader!/public/test.txt'
import jsStr from '!!raw-loader!/public/test.js'

console.log(vueStr);
console.log(txt);
console.log(jsStr);

require method

Add before the theme file path !!raw-loader!, and use.default

let vueStr = require(`!!raw-loader!./slider.vue`).default;
let txt = require(`!!raw-loader!/public/test.txt`).default;
let jsStr = require(`!!raw-loader!/public/test.js`).default;

console.log(vueStr);
console.log(txt);
console.log(jsStr);

configuration

By default no configuration is required, but if you are using CommonJSthe module syntax. Need to do the following configuration :

// webpack.config.js
module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.txt$/i,
        use: [
          {
    
    
            loader: 'raw-loader',
            options: {
    
    
              esModule: false,
            },
          },
        ],
      },
    ],
  },
};

// vue.config.js
module.exports = {
    
       
    chainWebpack(config) {
    
    
        config.module.rule('txt').test(/\.txt$/).use('raw-loader').loader('raw-loader').end();
    }    
};

Effect

Source File

The console outputs a string template, and the general user front-end document displays the source code.

PS: If you want to use the vite method, please refer to

"Vite uses ?raw to convert vue files to strings (two ways)"