0
我真的打了几个小时，现在得到一个简单的应用程序与webpack运行。我无法弄清楚我做错了什么。请帮忙！webpack不输出css文件
我正在建立react-redux-router应用程序+ typescript。我有一个自定义的css文件，我想在我的项目中使用它。
这里是我的webpack.config文件：
var webpack = require('webpack');
var path = require('path');
// variables
var isProduction = process.argv.indexOf('-p') >= 0;
var sourcePath = path.join(__dirname, './src');
var outPath = path.join(__dirname, './dist');
// plugins
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: sourcePath,
entry: {
main: './index.tsx',
vendor: [
'react',
'react-dom',
'react-redux',
'react-router',
'react-router-redux',
'redux'
]
},
output: {
path: outPath,
filename: 'bundle.js',
},
target: 'web',
resolve: {
extensions: ['.js', '.ts', '.tsx'],
// Fix webpack's default behavior to not load packages with jsnext:main module
// https://github.com/Microsoft/TypeScript/issues/11677
mainFields: ['main']
},
module: {
loaders: [
// .ts, .tsx
{
test: /\.tsx?$/,
loader: isProduction
? 'awesome-typescript-loader?module=es6'
: [
'react-hot-loader',
'awesome-typescript-loader'
]
},
// css
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
loader: [
{
loader: 'css-loader',
query: {
modules: true,
sourceMap: !isProduction,
importLoaders: 1,
localIdentName: '[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader'
}
]
})
},
// static assets
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.png$/, loader: "url-loader?limit=10000" },
{ test: /\.jpg$/, loader: 'file-loader' },
],
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
context: sourcePath,
postcss: [
require('postcss-import')({ addDependencyTo: webpack }),
require('postcss-url')(),
require('postcss-cssnext')(),
require('postcss-reporter')(),
require('postcss-browser-reporter')({ disabled: isProduction }),
]
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.bundle.js',
minChunks: Infinity
}),
new webpack.optimize.AggressiveMergingPlugin(),
new ExtractTextPlugin('/assets/css/inspinia.css'),
new HtmlWebpackPlugin({
template: 'index.html'
})
],
devServer: {
contentBase: sourcePath,
hot: true,
stats: {
warnings: false
},
},
node: {
// workaround for webpack-dev-server issue
// https://github.com/webpack/webpack-dev-server/issues/60#issuecomment-103411179
fs: 'empty',
net: 'empty'
}
};
现在在我的src文件夹中，我有一个assets文件夹，我已经把我的资产。这里是文件结构：
我想要求 “inspinia.css” 文件。这是我如何要求在我的index.tsx文件中：
require('./assets/css/inspinia.css');
编译是好的，我没有错误。但是，当我的WebPack-dev的服务器（使用命令npm start）我运行在浏览器中出现此错误：
现在你可以看到的WebPack是outputing我的CSS文件，在这个补丁/css/inspinia.css。但是，当我看到/dist我看到没有/css文件夹生成。为什么要这样做？背后的逻辑是什么？我无法从文档中看到明确的解释。
从我的计算器和网络上的研究，它看起来像这个问题可以依靠这个插件ExtractTextPlugin作品，也是publicPath财产的方式。我也读过，webpack-dev-server不会写磁盘上的文件，但从内存中提供服务...
但我可以看到webpack已生成输出文件/dist containe = ing我的包文件（index.html， bundle.js和vendor.bundle.js）。但我没有看到一个包含我的css文件的css文件。
任何帮助，任何建议朝着正确的方向将不胜感激。 （我相信我在做一些愚蠢的事......）
感谢
编辑1
这里是我的package.json：
{
"name": "react admin",
"version": "1.0.0",
"private": true,
"description": "React admin",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 3000 --open",
"build": "webpack -p --progress --colors"
},
"license": "MIT",
"devDependencies": {
"@types/classnames": "^0.0.32",
"@types/node": "^7.0.4",
"@types/react": "^15.0.6",
"@types/react-dom": "^0.14.22",
"@types/react-redux": "^4.4.36",
"@types/react-router": "^3.0.0",
"@types/react-router-redux": "^4.0.39",
"@types/redux-actions": "^1.2.2",
"@types/webpack": "^2.2.4",
"@types/webpack-env": "^1.13.0",
"awesome-typescript-loader": "^3.0.0-beta.18",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta.5",
"file-loader": "^0.10.0",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.28.0",
"postcss": "^5.2.11",
"postcss-browser-reporter": "^0.5.0",
"postcss-cssnext": "^2.9.0",
"postcss-import": "^9.1.0",
"postcss-loader": "^1.2.2",
"postcss-reporter": "^3.0.0",
"postcss-url": "^5.1.2",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.13.1",
"typescript": "^2.1.5",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.2.0",
"webpack-hot-middleware": "^2.16.1"
},
"dependencies": {
"@types/jquery": "^2.0.40",
"@types/react-bootstrap": "0.0.45",
"classnames": "^2.2.5",
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"redux-actions": "^1.2.1"
}
}
你使用的是webpack 1还是webpack 2？请分享package.json信息的版本，这很重要 –
我正在使用webpack 2.我正在修改我的问题上传我的package.json – TheSoul