Question

我正在将现有的javascript供应商库移动到webpack设置中，尽可能使用npm来安装npm模块并删除单个页面上的旧脚本标记，因为bundle.js和bundle.css包含它

在index.js中，我有以下

import 'materialize-css/dist/css/materialize.min.css';

但是，当运行webpack时，它会出现以下错误

Module parse failed: .......Unexpected character ''
You may need an appropriate loader to handle this file type.

因此，出于某种原因，webpack正在查看整个materialize文件夹，而不仅仅是单个缩小的css文件，然后在遇到materialize / fonts目录时出现错误。

我不清楚为什么会这样，以及如何阻止它。任何建议将不胜感激。

我的webpack配置位于

之下

const webpack = require('webpack');
const path = require('path');
var precss       = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var postcssImport = require('postcss-import');

module.exports = {

  context: __dirname + '/frontend',
  devtool: 'source-map',
  entry: "./index.js",
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './static')
},
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      },
      {
        test:   /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', '!css-loader?sourceMap&importLoaders=1!postcss-loader')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("si-styles.css")
  ],
   postcss: function(webpack) {
        return [
            postcssImport({ addDependencyTo: webpack }), // Must be first item in list
            precss,
            autoprefixer({ browsers: ['last 2 versions']  })
        ];
    },

}

将CSS供应商库导入index.js时出现Webpack错误

0 个答案: