Webpack 网页包赢得';不生成外部css文件

Webpack 网页包赢得';不生成外部css文件,webpack,webpack-style-loader,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/

我的网页包安装程序不会生成外部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')
    ]
};
  "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"
  }
Package.json开发依赖项

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')
    ]
};
  "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

我想出来了。现在工作!:-)我需要设置多个入口点,如下所示:

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

您也可以只需要JavaScript文件中的.less代码,并且只有一个入口点。