当我使用webpack构建时,/assets文件夹中的所有图像都消失了 [英] All images in /assets folder dissapear when I build with webpack
问题描述
直到现在我在 dev环境 中工作,但现在我进入了 产品环境 ,然后运行进入这个问题:
Until now I worked in dev enviroment, but now I arrived into prod enviroment, and I run into this issue:
有关该项目的一些重要细节:
some important details on the project:
- 一切正常,当我在
webpack-dev-server
上运行项目时,一切正常 - 它是一个 React 应用
- 我自己对
webpack.config
进行了服装化,所以也许我有一些错误(不是create-react-app) - 我的
/assets
文件夹中有一些图片 - 我已安装
font-awesome
- 我使用
file-loader
处理真棒和所有图像
- Everything works fine when I run the project on
webpack-dev-server
- Its a React app
- I costumized
webpack.config
myself so maybe I have some mistakes (not a create-react-app) - My
/assets
folder has some images - I have
font-awesome
installed - I use
file-loader
to deal with font-awesome and all the images
问题:
运行构建后,我将丢失在/assets
文件夹中拥有的所有图像,并只有一些 font-awesome-webfonts 文件.
After I run build I loose all of the images I had in the /assets
folder,
and get to have only some font-awesome-webfonts files.
我仍然在/dist
内有一个/assets
文件夹,但是我的图像在构建过程中丢失了.
I still get to have an /assets
folder inside /dist
, but my images are getting dropped of somewhere on the build proccess.
我不确定为什么会发生这种情况,但是我有一种感觉,即真棒字体的文件会在其余文件上运行,但这只是一个假设.
I'm not sure why this happens, but I have a feeling that font-awesome's files runs over the rest of the files, but its just an assumption.
你看到我在想什么吗?
我的webpack.config.js:
my webpack.config.js:
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const AutoDllPlugin = require('autodll-webpack-plugin');
// Development
const APP_DIR = path.join(__dirname, 'src');
const BUILD_DIR = path.join(__dirname, 'dist');
const ASSETS_DIR = path.join(__dirname, 'src', 'assets');
// Production
const PROD_URL = '/portfolio/dist/';
const PROD_ASSETS_DIR = PROD_URL+'assets';
module.exports = {
entry: {
main: APP_DIR,
},
output: {
filename: 'app.js',
path: BUILD_DIR,
publicPath: PROD_URL
},
devServer: {
historyApiFallback: true,
compress: true,
contentBase: ASSETS_DIR
},
module: {
rules: [
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.tsx?$/,
loader: 'ts-loader'
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /.(png|gif|jpg|jpeg|ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'dist/assets/', // where the fonts will go
publicPath: PROD_ASSETS_DIR // override the default path
}
}]
}
]
},
plugins: [
new HtmlPlugin({
filename: 'index.html',
template: './src/index.html'
}),
new AutoDllPlugin({
inject: true,
filename: '[name]_[hash].js',
entry: {
vendor: [
'react',
'react-dom',
'react-router-dom',
'mobx',
'mobx-react',
'd3',
// 'styled-component',
'lodash',
'topojson',
'font-awesome',
// 'react-flag-icon-css',
'react-chartjs-2',
'datamaps',
'chart.js'
]
}
}),
new BundleAnalyzerPlugin({
// Can be `server`, `static` or `disabled`.
// In `server` mode analyzer will start HTTP server to show bundle report.
// In `static` mode single HTML file with bundle report will be generated.
// In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
analyzerMode: 'server',
// Host that will be used in `server` mode to start HTTP server.
analyzerHost: '127.0.0.1',
// Port that will be used in `server` mode to start HTTP server.
analyzerPort: 8888,
// Path to bundle report file that will be generated in `static` mode.
// Relative to bundles output directory.
reportFilename: 'report.html',
// Module sizes to show in report by default.
// Should be one of `stat`, `parsed` or `gzip`.
// See "Definitions" section for more information.
defaultSizes: 'parsed',
// Automatically open report in default browser
openAnalyzer: false,
// If `true`, Webpack Stats JSON file will be generated in bundles output directory
generateStatsFile: false,
// Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
// Relative to bundles output directory.
statsFilename: 'stats.json',
// Options for `stats.toJson()` method.
// For example you can exclude sources of your modules from stats file with `source: false` option.
// See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
// Log level. Can be 'info', 'warn', 'error' or 'silent'.
logLevel: 'info'
})
],
devtool: 'source-maps',
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
}
}
推荐答案
我遇到了同样的问题,但是我可以通过要求此 const path = require('path')
并在我的输出中解决它对象我添加了这行 path:path.resolve(__ dirname,'dist/assets')
I had the same problem but i could solve it by require this const path = require('path')
and in my output object I added this line path: path.resolve(__dirname, 'dist/assets')
这篇关于当我使用webpack构建时,/assets文件夹中的所有图像都消失了的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!