标签: webpack-bundle

如何检测我的代码是否作为 Webpack 包执行

我目前正在尝试以下策略来从相对于我的模块的路径动态加载 json 文件:

  • 如果我的代码捆绑为 Webpack 捆绑包,请使用import(filename.json)
  • 在任何其他情况下,请使用绝对路径回退到 AJAX 调用

以下似乎工作正常:

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 作为 …

javascript json dynamic-import webpack webpack-bundle

5
推荐指数
0
解决办法
484
查看次数

Html-loader + file-loader 未捆绑正确的图像源

我计划在一个项目中使用 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

2
推荐指数
1
解决办法
4786
查看次数