Webpack 默认只能处理 JS 文件,要处理其他类型的文件就要依赖 loader 了,比如 css-loader
。
module: {
rules: [
{
test: /\.css$/, // 匹配 *.css 文件
use: ['style-loader', 'css-loader'], // 处理 *.css 文件的 loader
},
],
},
实现一个 textLoader
这里实现了一个简单的读取 .txt 文本文件的 textLoader,可以实现如下的功能: main.js
import article from './article.txt'; // 引入文本文件
console.log(article); // 打印字符串内容
article.txt (里面就是纯文本)
Every single time you access a website, you leave tracks. Tracks that others can access. If you don't like the idea, find out what software can help you cover them.
经过我们的 textLoader 处理,JS代码就能直接引入 .txt 文件,并将内容读取为字符串了。nice~👍
那么是怎么做到的呢?其实只有一行代码:
module.exports = function loader(source) {
// loader的唯一参数,即包含源文件文本内容的字符串
return `export default ${JSON.stringify(source)}`;
};
webpack loader 只接收一个参数,它就是包含源文件文本内容的字符串,这里只是用 export default
包装了下就可以了😺,然后返回处理后的文本字符串。
在 webpack.config.js 中引入这个 loader:
module: {
rules: [
{
test: /\.txt$/, // 匹配 *.txt 文件
use: ['./loaders/textLoader.js'], // 处理 *.txt 文件的 loader
},
],
},
参考 Writing a Loader。