在 ReactJs 应用程序中使用 webpack 处理资产

拉姆洛米·阿菲夫

我需要在我的 React 组件中加载图像:

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        stats: { modules: false },
        entry: { 'main': './ClientApp/boot.tsx' },
        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: 'dist/'
        },
        module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/,  loader: 'file-loader' },
                { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
                { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } 
            ]
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin('site.css')
        ])
    }];
};

在组件中,我尝试像这样加载图像:

  import Logo from '../css/images/logo.png';

但它没有用!

如何编辑配置 webpack 以处理资产特别是图像?

谢谢,

回教

从您的示例中,我认为您的图像文件是本地存储的。您是否使用created-react-appejected应用程序创建了 reactjs 应用程序。

import Logo from '../css/images/logo.png'

并使用像 <img src={Logo} className="blue"/>

或者 <img src={require('../css/images/logo.png')} className="blue"/>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在电子应用程序中使用Vue + Webpack引用静态资产

来自分类Dev

使用ReactJS应用程序和Webpack设置Airbrake-js

来自分类Dev

pdfmake在具有Webpack的应用程序中使用

来自分类Dev

在角度应用程序中使用自定义Webpack

来自分类Dev

在 ReactJS 和 Webpack 中使用 SASS

来自分类Dev

如何在Reactjs应用程序中使用分页

来自分类Dev

找不到模块:错误:无法解析模块“组件/应用程序”。webpack + reactjs问题

来自分类Dev

为什么`npm run bundle -- -p` (webpack -p) 不为我的 rails 应用程序编译资产?

来自分类Dev

在Java应用程序中使用处理

来自分类Dev

在Java应用程序中使用处理

来自分类Dev

webpack 5图像未使用`reactjs`加载

来自分类Dev

使用webpack处理scss

来自分类Dev

使用webpack-dev-server读取webpack资产json

来自分类Dev

如何在webpack + reactjs中使用环境变量?

来自分类Dev

如何在Electron.Atom \ WebPack应用程序中使用FS模块?

来自分类Dev

在 typescript/jquery/webpack 应用程序中使用 aws-sdk

来自分类Dev

在 Vue 应用程序中使用带有 Rails 5.1 的 webpack ProvidePlugin

来自分类Dev

如何在ReactJs应用程序中使用reduce()代替传统的foreach循环

来自分类Dev

如何在ReactJs应用程序中使用Google Analytics(分析)来跟踪事件

来自分类Dev

Webpack 是否为 Vue 应用程序处理 index.html?

来自分类Dev

在Ionic(Cordova)应用程序中处理Rails(后端)中的上载资产

来自分类Dev

跟踪ReactJS应用程序

来自分类Dev

使用Webpack处理图像的想法

来自分类Dev

使用 webpack(前端 reactjs)和 .NET 后端热重载

来自分类Dev

使用 Webpack 4 在 ReactJs 项目中设置 publicpath

来自分类Dev

使用Vuejs,Webpack和tailwindcss创建Electron应用程序

来自分类Dev

使用 webpack 构建 angular 6 应用程序时出错

来自分类Dev

通过 Webpack 创建带有散列的供应商包并在同构应用程序中使用它

来自分类Dev

需要在Angularjs应用程序中使用promise($ q)处理会话超时

Related 相关文章

  1. 1

    在电子应用程序中使用Vue + Webpack引用静态资产

  2. 2

    使用ReactJS应用程序和Webpack设置Airbrake-js

  3. 3

    pdfmake在具有Webpack的应用程序中使用

  4. 4

    在角度应用程序中使用自定义Webpack

  5. 5

    在 ReactJS 和 Webpack 中使用 SASS

  6. 6

    如何在Reactjs应用程序中使用分页

  7. 7

    找不到模块:错误:无法解析模块“组件/应用程序”。webpack + reactjs问题

  8. 8

    为什么`npm run bundle -- -p` (webpack -p) 不为我的 rails 应用程序编译资产?

  9. 9

    在Java应用程序中使用处理

  10. 10

    在Java应用程序中使用处理

  11. 11

    webpack 5图像未使用`reactjs`加载

  12. 12

    使用webpack处理scss

  13. 13

    使用webpack-dev-server读取webpack资产json

  14. 14

    如何在webpack + reactjs中使用环境变量?

  15. 15

    如何在Electron.Atom \ WebPack应用程序中使用FS模块?

  16. 16

    在 typescript/jquery/webpack 应用程序中使用 aws-sdk

  17. 17

    在 Vue 应用程序中使用带有 Rails 5.1 的 webpack ProvidePlugin

  18. 18

    如何在ReactJs应用程序中使用reduce()代替传统的foreach循环

  19. 19

    如何在ReactJs应用程序中使用Google Analytics(分析)来跟踪事件

  20. 20

    Webpack 是否为 Vue 应用程序处理 index.html?

  21. 21

    在Ionic(Cordova)应用程序中处理Rails(后端)中的上载资产

  22. 22

    跟踪ReactJS应用程序

  23. 23

    使用Webpack处理图像的想法

  24. 24

    使用 webpack(前端 reactjs)和 .NET 后端热重载

  25. 25

    使用 Webpack 4 在 ReactJs 项目中设置 publicpath

  26. 26

    使用Vuejs,Webpack和tailwindcss创建Electron应用程序

  27. 27

    使用 webpack 构建 angular 6 应用程序时出错

  28. 28

    通过 Webpack 创建带有散列的供应商包并在同构应用程序中使用它

  29. 29

    需要在Angularjs应用程序中使用promise($ q)处理会话超时

热门标签

归档