Webpack - ExtractTextPlugin：沒有生成css文件，沒有錯誤

Question

我想使用https://github.com/webpack-contrib/extract-text-webpack-plugin爲了得到混合的css文件。

隨着我目前的狀況，我有這樣的：

正如你所看到的，我有我的js文件，我的字體，但沒有CSS文件的跡象... 我試了幾個例子我就發現自己的github問題或他們的文檔，但仍然沒有結果。

我的package.json：

{ 
    "name": "test", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "webpack-dev-server --env=dev --progress --watch --content-base src/app" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-polyfill": "^6.23.0", 
    "babel-preset-env": "^1.4.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-es2016": "^6.24.1", 
    "css-loader": "^0.28.1", 
    "extract-text-webpack-plugin": "^2.1.0", 
    "file-loader": "^0.11.1", 
    "json-loader": "^0.5.4", 
    "postcss-cssnext": "^2.10.0", 
    "postcss-loader": "^2.0.1", 
    "postcss-modules-values": "^1.2.2", 
    "raw-loader": "^0.5.1", 
    "sass-loader": "^6.0.3", 
    "style-loader": "^0.17.0", 
    "url-loader": "^0.5.8", 
    "webpack": "^2.5.1", 
    "webpack-dev-server": "^2.4.5" 
    }, 
    "dependencies": { 
    "admin-lte": "git://github.com/almasaeed2010/AdminLTE.git#37c8bbb01998db487382e9d62cfb398511167f3a", 
    "bootstrap-daterangepicker": "git://github.com/dangrossman/bootstrap-daterangepicker.git#29bbf5a04df69fda363cedb534272ac344524e57", 
    "bootstrap-table": "^1.11.2", 
    "eonasdan-bootstrap-datetimepicker": "git://github.com/Eonasdan/bootstrap-datetimepicker.git#4.17.47", 
    "font-awesome": "^4.7.0", 
    "ionicons": "^3.0.0", 
    "jquery": "^3.2.1", 
    "jquery-confirm": "git://github.com/craftpip/jquery-confirm.git", 
    "lobibox": "git://github.com/arboshiki/lobibox.git", 
    "lodash": "^4.17.4", 
    "moment-timezone": "^0.5.13", 
    "parsleyjs": "^2.7.1", 
    "push.js": "0.0.13", 
    "socket.io-client": "^1.7.4", 
    "tableexport.jquery.plugin": "git://github.com/hhurz/tableExport.jquery.plugin.git" 
    } 
} 

我webpack.config.js：

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

const postcssPlugins = [ 
    require('postcss-cssnext')(), 
    require('postcss-modules-values') 
]; 

const scssLoader = [ 
    { loader: 'style-loader' }, 
    { loader: 'css-loader' }, 
    { loader: 'sass-loader' } 
]; 

const postcssLoader = [ 
    { loader: 'style-loader' }, 
    { loader: 'css-loader', options: { modules: true } }, 
    { loader: 'postcss-loader', options: { plugins:() => [...postcssPlugins] } } 
]; 

// you'll need to npm install the following: [raw-loader, html-minifier-loader, json-loader, css-loader,style-loader, url-loader, file-loader ] 
// in your index.html you should have two script tags, one for app.js(or bundle.js) and vendor.js 
// no need for babelify with webpack. just, npm install --save-dev babel-cli babel-preset-es2016 
// in .babelrc file change the preset of 2015 to ["es2016"] 
module.exports = { 
    entry: { 
    app: './app.js', 
    // if any on these are just for css remove them from here and require(with absolute path) them from app.js 
    vendor: [ 
     'babel-polyfill', 
     'admin-lte', 
     'admin-lte/bootstrap/js/bootstrap.min.js', 
     'lobibox/dist/js/notifications.min.js', 
     'admin-lte/plugins/fastclick/fastclick.js', 
     'moment', 
     'moment/locale/fr.js', 
     'moment-timezone', 
     'eonasdan-bootstrap-datetimepicker', 
     'bootstrap-table', 
     'bootstrap-table/dist/locale/bootstrap-table-fr-BE.min.js', 
     'parsleyjs', 
     'parsleyjs/dist/i18n/fr.js', 
     'bootstrap-daterangepicker', 
     'socket.io-client', 
     'jquery-confirm', 
     'push.js', 
     'lodash', 
     'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js', 
     'tableexport.jquery.plugin' 
    ] 
    }, 
    //devtool: 'eval', // for test in the browser 
    output: { 
    filename: '[name].js', 
    path: path.resolve(__dirname, 'dist')//, 
    //pathinfo: true 
    }, 
    module: { 
    rules: [{ 
     test: /\.js$/, 
     use: 'babel-loader', 
     exclude: /node_modules/ 
    }, { 
     test: /\.html$/, 
     use: ['raw-loader', 'html-minifier-loader'], 
     exclude: /node_modules/ 
    }, { 
     test: /\.json$/, 
     use: 'json-loader', 
     exclude: /node_modules/ 
    }, { 
     test: /\.(scss|sass)$/, 
     loader: ExtractTextPlugin.extract(scssLoader), 
     include: [__dirname] 
    },{ 
     test: /\.css$/, 
     loader: postcssLoader, 
     include: [__dirname] 
    }, { 
     test: /\.(jpg|png|gif)$/, 
     use: 'file-loader' 
    }, { 
     test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
     loader: 'file-loader?name=fonts/[name].[ext]' 
    }], 
    }, 
    plugins: [ 
    new ExtractTextPlugin("app.bundle.css"), 
    new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
    }) 
    ], 
}; 

我app.js（僅幾個要求和測試的console.log）：

console.log("coucou"); 

require('admin-lte/dist/css/skins/skin-blue.min.css'); 
require('admin-lte/dist/css/AdminLTE.min.css'); 
require('jquery-confirm/dist/jquery-confirm.min.css'); 
require('bootstrap-table/dist/bootstrap-table.min.css'); 
require('bootstrap-daterangepicker/daterangepicker.css'); 
require('eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css'); 
require('admin-lte/plugins/select2/select2.min.css'); 
require('lobibox/dist/css/lobibox.min.css'); 
require('ionicons/dist/css/ionicons.min.css'); 
require('font-awesome/css/font-awesome.min.css'); 
require('admin-lte/bootstrap/css/bootstrap.min.css'); 

Answer 1

文檔中存在拼寫錯誤。我認爲問題在於插件的定義。嘗試：

new ExtractTextPlugin({ 
    filename: 'app.bundle.css', 
    allChunks: true 
}),