Question

模块解析失败：意外字符'。'（1：0）您可能需要一个适当的加载程序来处理此文件类型。

这是我在Webpack项目中尝试过的：

const glob = require('glob');
const webpack = require('webpack');

const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {
  entry: {
    button: glob.sync(`${__dirname}/components/index.js`),
  },
  output: {
    path: `${__dirname}/dist`,
    filename: 'index.js',
    library: 'components',
    libraryTarget: 'umd',
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    loaders: [
      {
        rules: [{
          test: /\.js$/,
          loaders: ['babel-loader'],
        }]
      },
      {
        test: /\.css$/,
        loader: 'style-loader'
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: './assets/media/',
              publicPath: './assets/media/'
            }
          }
        ]
      }
    ],
  },
  externals: [
    'prop-types',
    'react',
    'react-dom',
  ],
  plugins: [
    new UglifyJsPlugin({ minimize: true }),
  ],
};

在我的js文件中，我尝试导入并使用一个像这样的简单png：

import favicon from '../assets/media/star-full.png'
import beers from './beers.json'

<Card
  imgUrl={beer.image_url}
  name={beer.name}
  tagline={beer.tagline}
  iconFavorites={favicon}>
</Card>);

根据请求，我的package.json文件（重点是我安装了file-loader 3.0.1）：

{
  "name": "storybook-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "file-loader": "^3.0.1",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "url-loader": "^1.1.2"
  },
  "devDependencies": {
    "@storybook/react": "^3.4.2",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.3",
    "babel-plugin-react-css-modules": "^3.4.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-react": "^7.8.2",
    "glob": "^7.1.2",
    "react-hot-loader": "^4.2.0",
    "style-loader": "^0.21.0"
  },
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook",
    "build": "webpack -p"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/chenchi13/storybook-project.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/chenchi13/storybook-project/issues"
  },
  "homepage": "https://github.com/chenchi13/storybook-project#readme"
}

我一直收到相同的错误，我可能是由于此Webpack配置导致的，但是我不知道我该怎么做...关于同一问题的所有其他问题都没有正确解释正确的方法配置Webpack，因为大多数答案是局部的，并且没有给我足够的见识来解决此问题。

如何在webpack中为png正确配置loader？

0 个答案: