Sla*_*rJS 5 html pdf download webpack-file-loader
我正在使用简单的 jQuery、sass 和 html 进行编码。我正在尝试创建一个简单的 PDF html 下载链接,但我不知道如何在 webpack 配置中使用 file-loader 编译 pdf 文件...而且我想知道 file-loader 是否是正确的依赖项为此(我使用的是版本 1.1.6)。
我尝试将“pdf”添加到 webpack.config.js 文件中的“test: /.(gif|png|jpe?g)$/”,以便它读取“test: /.(gif|png|jpe? g|pdf)$/' - 它不起作用。这是在删除并重新安装 node_modules 和 dist 之后。我还手动将 pdf 文件添加到我的 dist 文件中,以确保它不是 HTML 或其他问题。事实上,在那之后它确实起作用了,但我想让这个东西在我的 webpack 环境中单独构建。
//webpack.config.js file, using file-loader 1.1.6
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'eval-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.(gif|png|jpe?g|pdf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images/'
}
}
]
}
]
}
};
// HTML download link
<a href="./assets/images/filename.pdf" download>
<div class="this class">
<p>Linktext</p>
</div>
</a>
Run Code Online (Sandbox Code Playgroud)
我期望我的 .pdf 文件在 dist 文件夹中编译,但它没有出现。
我的其他图像文件正在加载到 dist 文件夹中的正确文件路径中,但不是 .pdf 文件、.gif 文件或(奇怪的)大 .png 文件。不过,我真的只关心 .pdf 文件。所有其他图像加载正常;它们都是 .png 和 jpeg 文件。
| 归档时间: |
|
| 查看次数: |
1075 次 |
| 最近记录: |