首页新闻找找看学习计划

webpack css-loader相关的问题

0
悬赏园豆:50 [待解决问题]

两天了,20个小时,我就在琢磨这个莫名其妙的问题,实在研究不明白了,求助大神帮忙解决。
报错如下

我的package.json

{
  "name": "meikeyun-static",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "babel": "babel src -d lib",
    "babel-node": "babel-node"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.24.1",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.10.0",
    "postcss-loader": "^2.0.5",
    "react": "^0.14.7",
    "react-hot-loader": "^1.3.0",
    "react-transform-hmr": "^1.0.4",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.7",
    "webpack": "~2.2.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-manifest-plugin": "~1.1.0"
  },
  "dependencies": {
    "koa": "2.0.0",
    "koa-bodyparser": "3.2.0",
    "koa-router": "7.0.0",
    "koa-webpack-middleware": "~1.0.3",
    "koa-static-cache": "~4.0.0",
    "nunjucks": "2.4.2",
    "mime": "1.3.4",
    "mz": "2.4.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

我的webpack配置

/**
 *@内容:webpack的配置
 *@作者:tzw
 *@时间:2017年5月15日21:42:38
 */
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const manifestPlugin = require('webpack-manifest-plugin');

// 引入配置文件(系统基础配置)
const config = require('../config/app.config');

// 遍历JSX文件
function searchModels(){
    var files = fs.readdirSync(config.JSX_ROOT);
    var js_files = files.filter((f)=>{
        return f.endsWith('.js');
    });
    var entry = {};
    for(var f of js_files){
        entry[f.split(".")[0]] = path.join(config.JSX_ROOT, f);
    }
    return entry;
}

function creatEntry(){
    let entry = searchModels();
    entry['vendorLib'] = ['react', 'react-dom'/*, 'react-router', 'mobx', 'mobx-react', 'lodash', 'moment', 'socket.io-client'*/];
    return entry;
}

webpackConfig = {
  entry: creatEntry(),
  output: {
    path: config.JS_ROOT, //打包后的文件存放的地方
    filename: '[name].js', //打包后输出文件的文件名
    publicPath: '/js/'
  },
  module:{
    rules:[
      { test : /\.(js|jsx)$/, exclude : /(node_modules)/, loaders : 'babel-loader'},
      // 图片加载
      // { test: /\.(jpg|png|gif|svg)(\?.+)?$/, loader: 'url-loader?limit=8192&name=[name]-[hash:8].[ext]' },
      //添加对样式表的处理 感叹号(!)的作用在于使同一文件能够使用不同类型的loader
      { test: /\.css$/, loaders: 'style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]' }
      // 文件加载
      //{ test: /\.(ttf|otf|eot|woff2?)(\?.+)?$/, loader: 'file-loader?name=[name]-[hash:8].[ext]' }
    ]
  },
  plugins: [
    // 有时候你不知道为什么引入一个插件,但是你知道不引入就报错,这个插件好像是为了解决是开发环境还是生产环境的问题
    new webpack.DefinePlugin({ 'process.env': {'NODE_ENV': JSON.stringify('production'), 'process.env.DEV': true, 'process.env.BROWSER': true} }),
    // 压缩JS文件(调试的时候不要压缩)
    // new webpack.optimize.UglifyJsPlugin({ compress: {warnings: false} }),
    // 将所有依赖打包成一个文件
    new webpack.optimize.CommonsChunkPlugin({name:'vendorLib', filename: 'vendorLib.js'}),
    // 生成入口文件的键值对(即{入口:真实的文件路径})
    new manifestPlugin()
  ]
}

module.exports = webpackConfig;
问题补充:

我的JSX文件

/**
 * 第一个组件
 */

import React from 'react';

import { render } from 'react-dom';

import styles from '../css/FirstModels.css';

// 我也不知道什么毛病,类名必须大写(我猜是为了速度,用大写就区分了html标签和React标签)
class HelloWord extends React.Component {
    constructor(props) {
        super(props);
    }

    render(){
        return (<h1 className={styles['hello']}>hello world</h1>);
    }
}

render(
    <HelloWord />,
    document.getElementById('container')
);

我的CSS文件

.hello {
    font-size: 50px;color: red;
}
返回值X的主页 返回值X | 初学一级 | 园豆:6
提问于:2017-05-24 11:33
< >
分享
所有回答(1)
0

webpack --display-error-details //显示异常信息 使用这个或者其他的参数,详细输出信息看看

2012 | 园豆:18877 (专家六级) | 2017-05-25 08:29
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册