Webpack 网页包1.12.13无法解析';文件';或';目录'/img/readme2.png
我使用webpack 1.12.13,webpack产生错误: ./~/css加载程序!中出错/src/styles/oil.css 未找到模块:错误:无法解析C:\react\u oil\src\styles中的“file”或“directory”。/img/close.png @./~/css加载器/src/styles/oil.css 6:15780-15806 ./~/css加载程序!中出错/src/styles/oil.css 未找到模块:错误:无法解析“文件”或“目录”。/img/use.png在C:\react\u oil\src\styles中 @./~/css加载器/src/styles/oil.css 6:17678-17702 错误可能是什么 网页包配置:Webpack 网页包1.12.13无法解析';文件';或';目录'/img/readme2.png,webpack,webpack-style-loader,Webpack,Webpack Style Loader,我使用webpack 1.12.13,webpack产生错误: ./~/css加载程序!中出错/src/styles/oil.css 未找到模块:错误:无法解析C:\react\u oil\src\styles中的“file”或“directory”。/img/close.png @./~/css加载器/src/styles/oil.css 6:15780-15806 ./~/css加载程序!中出错/src/styles/oil.css 未找到模块:错误:无法解析“文件”或“目录”。/img/u
var path = require('path')
var webpack = require('webpack')
var NpmInstallPlugin = require('npm-install-webpack-plugin')
var autoprefixer = require('autoprefixer');
var precss = require('precss');
var ExtractTextPlugin = require ('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'babel-polyfill',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin(),
new ExtractTextPlugin('bundle.css')
],
module: {
preLoaders: [
{
test: /\.js$/,
loaders: ['eslint'],
include: [
path.resolve(__dirname, "src"),
],
}
],
loaders: [
{
loaders: ['react-hot', 'babel-loader'],
include: [
path.resolve(__dirname, "src"),
],
test: /\.js$/,
plugins: ['transform-runtime'],
},
{
test: /\.css$/,
//loader: "style-loader!css-loader!postcss-loader"
loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader')
},
{
test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
include: /\/node_modules\//,
loader: "file?name=[1].[ext]®Exp=node_modules/(.*)"
},
{
test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
exclude: /\/node_modules\//,
loader: "file?name=[path][name].[ext]"
}
]
},
postcss: function () {
return [autoprefixer, precss];
}
}
文件夹结构:
node_modules
src
|--styles
|--oil.css
|--img
|--image files
webpack.config.js
对于webpack 4,现在必须在加载程序规则中添加整个“文件加载程序”,而不仅仅是“文件”。但我看到你的是Webpack1.x。最好把你的js代码也放在这里。 除此之外,尝试在js中导入img,然后在那里设置img元素。他也面临着类似的问题,为我工作,在网页包加载器中只有“文件加载器” 大概是这样的: 从“/xxx.png”导入图标 内部脚本:
document.getElementById('imgtag-id')。src=icon 回答正确,但你能再解释一下这是怎么回事吗?
test:/\.(png|svg|jpeg|ttf)$/,
use:[{
loader:require.resolve("file-loader") + "?name=../[path][name].[ext]"