webpack 中的基金会抛出错误

Question

我是第一次使用 foundation 它抛出错误一些无意义的单词 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 中的基金会抛出错误

Foundation throwing error in webpack

javascript

zurb-foundation

reactjs

webpack