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; }
所有回答(1)
0
webpack --display-error-details //显示异常信息 使用这个或者其他的参数，详细输出信息看看
