Tôi đang sử dụng webpack để quản lý một dự án Reacjs . Tôi muốn tải hình ảnh trong javascript bằng webpack file-loader. Dưới đây là webpack.config.js :
const webpack = require('webpack');
const path = require('path');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const PATHS = {
react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
app: path.join(__dirname, 'src'),
build: path.join(__dirname, './dist')
};
module.exports = {
entry: {
jsx: './app/index.jsx',
},
output: {
path: PATHS.build,
filename: 'app.bundle.js',
},
watch: true,
devtool: 'eval-source-map',
relativeUrls: true,
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.less'],
modulesDirectories: ['node_modules'],
alias: {
normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
}
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: "source-map-loader"
},
],
loaders: [
{
test: /\.html$/,
loader: 'file?name=[name].[ext]',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets=es2015',
},
{test: /\.css$/, loader: 'style-loader!css-loader'},
{test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]"},
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel-loader?presets=es2015']
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
new NpmInstallPlugin({
save: true // --save
}),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
],
devServer: {
colors: true,
contentBase: __dirname,
historyApiFallback: true,
hot: true,
inline: true,
port: 9091,
progress: true,
stats: {
cached: false
}
}
}Tôi đã sử dụng dòng này để tải các tệp hình ảnh và sao chép chúng vào thư mục dist / public / icon và giữ nguyên tên tệp.
{test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]"}Nhưng tôi có hai vấn đề khi sử dụng nó. Khi tôi chạy webpacklệnh, tệp hình ảnh đã được sao chép vào thư mục dist / public / icon / như mong đợi. Tuy nhiên, nó cũng được sao chép vào thư mục dist với tên tệp này "df55075baa16f3827a57549950901e90.png".
Dưới đây là cấu trúc dự án của tôi:
Một vấn đề khác là tôi đã sử dụng mã bên dưới để nhập tệp hình ảnh này nhưng nó không hiển thị trên trình duyệt. Nếu tôi đang sử dụng url 'public / icon / fanteview_item_n normal.png' trên thẻ img, nó hoạt động tốt. Làm thế nào để sử dụng đối tượng được nhập từ tệp hình ảnh?
import React, {Component} from 'react';
import {render} from 'react-dom';
import img from 'file!../../public/icons/imageview_item_normal.png'
export default class MainComponent extends Component {
render() {
return (
<div style={styles.container}>
download
<img src={img}/>
</div>
)
}
}
const styles = {
container: {
width: '100%',
height: '100%',
}
}