  \href{https://github.com/webpack/webpack}{\texttt{  }} 

\href{https://npmjs.com/package/raw-loader}{\texttt{ }} \href{https://nodejs.org}{\texttt{ }} \href{https://david-dm.org/webpack-contrib/raw-loader}{\texttt{ }} \href{https://github.com/webpack-contrib/raw-loader/actions}{\texttt{ }} \href{https://codecov.io/gh/webpack-contrib/raw-loader}{\texttt{ }} \href{https://gitter.im/webpack/webpack}{\texttt{ }} \href{https://packagephobia.now.sh/result?p=raw-loader}{\texttt{ }}\hypertarget{md_sfcode_node_modules_raw_loader_README_autotoc_md23909}{}\doxysection{raw-\/loader}\label{md_sfcode_node_modules_raw_loader_README_autotoc_md23909}
A loader for webpack that allows importing files as a String.\hypertarget{md_sfcode_node_modules_raw_loader_README_autotoc_md23910}{}\doxysubsection{Getting Started}\label{md_sfcode_node_modules_raw_loader_README_autotoc_md23910}
To begin, you\textquotesingle{}ll need to install {\ttfamily raw-\/loader}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\$ npm install raw-\/loader -\/-\/save-\/dev }

\end{DoxyCode}


Then add the loader to your {\ttfamily webpack} config. For example\+:

{\bfseries{file.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import txt from './file.txt'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{// webpack.config.js}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).txt\$/i,}
\DoxyCodeLine{        use: 'raw-\/loader',}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


And run {\ttfamily webpack} via your preferred method.\hypertarget{md_sfcode_node_modules_raw_loader_README_autotoc_md23911}{}\doxysubsection{Options}\label{md_sfcode_node_modules_raw_loader_README_autotoc_md23911}
\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{4}{|X[-1]}|}
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endfirsthead
\hline
\endfoot
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endhead
\PBS\centering $\ast$$\ast$\href{\#esmodule}{\texttt{ {\ttfamily es\+Module}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{Boolean\}}   &\PBS\centering {\ttfamily true}   &Uses ES modules syntax   \\\cline{1-4}
\end{longtabu}
\hypertarget{md_sfcode_node_modules_raw_loader_README_autotoc_md23912}{}\doxysubsubsection{$<$tt$>$es\+Module$<$/tt$>$}\label{md_sfcode_node_modules_raw_loader_README_autotoc_md23912}
Type\+: {\ttfamily Boolean} Default\+: {\ttfamily true}

By default, {\ttfamily raw-\/loader} generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of \href{https://webpack.js.org/plugins/module-concatenation-plugin/}{\texttt{ module concatenation}} and \href{https://webpack.js.org/guides/tree-shaking/}{\texttt{ tree shaking}}.

You can enable a Common\+JS module syntax using\+:

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).txt\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'raw-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              esModule: false,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_raw_loader_README_autotoc_md23913}{}\doxysubsection{Examples}\label{md_sfcode_node_modules_raw_loader_README_autotoc_md23913}
\hypertarget{md_sfcode_node_modules_raw_loader_README_autotoc_md23914}{}\doxysubsubsection{Inline}\label{md_sfcode_node_modules_raw_loader_README_autotoc_md23914}

\begin{DoxyCode}{0}
\DoxyCodeLine{import txt from 'raw-\/loader!./file.txt'; }

\end{DoxyCode}


Beware, if you already define loader(s) for extension(s) in {\ttfamily webpack.\+config.\+js} you should use\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{import css from '!!raw-\/loader!./file.txt'; // Adding `!!` to a request will disable all loaders specified in the configuration }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_raw_loader_README_autotoc_md23915}{}\doxysubsection{Contributing}\label{md_sfcode_node_modules_raw_loader_README_autotoc_md23915}
Please take a moment to read our contributing guidelines if you haven\textquotesingle{}t yet done so.

./.github/\+CONTRIBUTING.\+md \char`\"{}\+CONTRIBUTING\char`\"{}\hypertarget{md_sfcode_node_modules_raw_loader_README_autotoc_md23916}{}\doxysubsection{License}\label{md_sfcode_node_modules_raw_loader_README_autotoc_md23916}
\href{./LICENSE}{\texttt{ MIT}} 