Webpack不会生成外部css文件

时间:2015-12-29 04:01:20

标签: webpack webpack-style-loader

我的网站设置无法生成外部css文件。然而它捆绑我的.js就好了。我正在使用ExtractTextPlugin并且它仍然无法正常工作。不会生成错误。任何帮助将不胜感激! : - )

这是我的webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {

    entry: './client/app/root.js',

    output: {
        path: path.resolve('./client/dist'),
        filename: 'bundle.js'
    },

    devtool: 'source-map',
    watch: true,

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('styles.css')
    ]
};

Package.json dev dependencies

  "devDependencies": {
    "babel-core": "6.0.20",
    "babel-eslint": "4.1.3",
    "babel-loader": "6.0.1",
    "babel-preset-es2015": "6.0.15",
    "babel-preset-react": "6.0.15",
    "babel-preset-stage-0": "6.0.15",
    "eslint-plugin-react": "3.6.2",
    "freezer-redux-devtools": "^1.1.0",
    "css-loader": "^0.15.5",
    "extract-text-webpack-plugin": "^0.8.2",
    "less": "^2.5.1",
    "less-loader": "^2.2.0",
    "redux-devtools": "^2.1.5",
    "style-loader": "^0.12.3",
    "webpack": "^1.9.10",
    "webpack-dev-server": "^1.14.0"
  }

文件夹结构:

client
   --> app
   --> dist
   --> public
   --> styles

1 个答案:

答案 0 :(得分:2)

我明白了。现在工作! :-)我需要像这样设置多个入口点:

entry: [
    './client/app/root',
    './client/styles/styles.less'
],