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
}),

Webpack - ExtractTextPlugin：没有生成css文件，没有错误

1 个答案: