我目前正在尝试以下策略来从相对于我的模块的路径动态加载 json 文件:
import(filename.json) 以下似乎工作正常:
function parse (fileName, callback) {
var path = "./relative/path/to/" + fileName + ".json";
var cb = process.bind(this, fileName, callback);
if (typeof webpackJsonp !== "undefined") { // <-- Test if run as Webpack bundle
// Do dynamic import
} else {
// Do Ajax call
}
}
Run Code Online (Sandbox Code Playgroud)
但是,我找不到任何关于 的文档webpackJsonp,所以我认为这不是 Webpack 公共 API 的一部分。
我还注意到这webpackJsonp是 3.12 中的一个函数和一个Object(继承自Array),表明依赖 的存在、值或类型是多么脆弱webpackJsonp。
是否有一种(面向未来的)可靠的方法来测试我的代码是否使用公共 API 作为 …
我计划在一个项目中使用 Webpack,并使用 Html-loader + file-loader 设置工作流程,以获取带有图像动态 src 的生产 html 文件,正如 Colt Steele 在本视频中所教授的那样。这是我的 src/ 文件:
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popular on Letterboxd</title>
</head>
<body>
<img src="./assets/chira.jpg" />
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
索引.js:
import img from './assets/chira.jpg';
import "./main.css";
Run Code Online (Sandbox Code Playgroud)
和main.css
body {
background-color: darkblue;
}
Run Code Online (Sandbox Code Playgroud)
这些是我的配置文件(我有一个用于开发和生产的个人文件,以及两个共同的配置文件):
webpack.common.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
devtool: "none",
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.css$/, …Run Code Online (Sandbox Code Playgroud) html webpack webpack-html-loader webpack-file-loader webpack-bundle