Question

我第一次使用基础它的投掷错误一些inavlid字u 可以看到我附加的图像文件我不知道这里发生了什么。这是我的webpack配置文件，我正在设置入口点。我也设置外部和插件，但它仍然无法正常工作。我已经安装了这个依赖项css-loader@0.23.1 script-loader@0.6.1 style-loader@0.13.0 jquery@2.2.1 foundation-sites@6.2.0。

webpack.config.js -

 var webpack = require('webpack');

 module.exports = {
  entry:[
    'script!jquery/dist/jquery.min.js',
    'script!foundation-sites/dist/foundation.min.js',
    './app/app.jsx'
],
externals:{
    jquery: 'jQuery'
},
plugins : [
    new webpack.ProvidePlugin({
        '$' : 'jquery',
        'jQuery' : 'jquery'
    })

],
output:{
    path:__dirname,
    filename:'./public/bundle.js',
},
resolve:{
    root:__dirname,
    alias:{
        Main:'app/components/Main.jsx',
        Nav: 'app/components/Nav.jsx',
        Weather : 'app/components/Weather.jsx',
        WeatherForm : 'app/components/WeatherForm.jsx',
        WeatherMessage : 'app/components/WeatherMessage.jsx',
        About : 'app/components/About.jsx',
        Examples: 'app/components/Examples.jsx',
        openWeatherMap : 'app/api/openWeatherMap.jsx'
    },
    extensions:['','.js','.jsx']
},
module:{
    loaders:[
        {
            loader:'babel-loader',
            query:{
                presets:['react','es2015']
            },
            test:/\.jsx?$/,
            exclude:/(node_modules|bower_components)/
        }
    ]
},
devtool: 'cheap-module-eval-source-map'
}

app.jsx： -

   var React = require('react');
   var ReactDOM = require('react-dom');
   var {Route, Router, IndexRoute, hashHistory} = require('react-router');
   var Main = require('Main');
   var Weather = require('Weather');
   var About = require('About');
   var Examples = require('Examples')


   //load foundation
      require('style!css!foundation-sites/dist/foundation.min.js');
      $(document).foundation();

    ReactDOM.render(
   <Router history={hashHistory}>
   <Route path="/" component={Main}>
   <Route path="about" component={About}/>
   <Route path="examples" component={Examples}/>
     <IndexRoute component={Weather}/>
        </Route>
    </Router>,
    document.getElementById('app')
    );

Answer 1

您正在尝试将css-loader应用于JavaScript文件。

require('style!css!foundation-sites/dist/foundation.min.js');
//                                                      ^^

css-loader期望CSS和JavaScript显然不是有效的CSS，因此无法解析。假设您只想使用CSS，则需要导入dist/foundation.min.css。

require('style!css!foundation-sites/dist/foundation.min.css');

另外，一般不鼓励使用内联加载器，而应该为.css文件定义规则。

webpack中的基础抛出错误

1 个答案: