提取文本Webpack插件不會生成偽像

Question

我有一個非常簡單的設置，它使用Webpack（1.14.0）和Extract Text Webpack插件（1.0.1）來生成CSS文件。 問題在於，在運行webpack時，不會產生CSS工件。

這是我的webpack.config.js ：

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

module.exports = {
  entry: [
    path.resolve(__dirname, 'src') + '/index.js'
  ],
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  plugins: [
    new ExtractTextPlugin(path.resolve(__dirname, 'dist') + '/style.css')
  ]
}

如您所見，這是一個非常簡單的設置。 我有一個名為src的文件夾，其中包含一個名為index.js （當前為空白）和style.css （僅包含一個單一主體樣式）的文件。 期望相對的dist文件夾包含一個名為style.css的構件（基本上應該只是原始文件的副本）。 實際結果是僅生成了dist/bundle.js 。 至於我可以告訴的WebPack的版本，並提取文本的WebPack插件應該是兼容時（ peerDependency提取文本的WebPack插件是^1.9.11 ）。

我在這里想念什么？

Answer 1

我能夠得到它來生成工件，但是我對這種解決方案並不滿意。

這是我更新的webpack.config.js ：

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

module.exports = {
  entry: [
    path.resolve(__dirname, 'src') + '/index.js',
    path.resolve(__dirname, 'src') + '/style.scss'
  ],
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ]
}

解決方案是添加樣式表（在本例中為path.resolve(__dirname, 'src') + '/style.scss' ）作為入口點。 如果您的JavaScript文件始終未引用樣式表，則必須執行此操作。 我將樣式表更改為Sass，以證明加載程序正在處理文件，而不僅僅是復制未處理的文件。

該解決方案似乎並不適合該主題的現有文檔，但我認為大多數教程和示例都暗含了入口點屬性。 因此，我可能只是沒有意識到必須指定的方式。

問題加到我正在傳遞完整路徑到new ExtractTextPlugin()構造函數。 這不是沒有生成文件的原因，但是我也做錯了。 它只需要是文件名。 輸出屬性路徑是自動引用的。

Answer 2

因此，經過大量的修改，我認為我終於想出了一個比我最初使用的解決方案更好的解決方案。 為了明確目標是什么，我想使用Webpack生成單獨的樣式表文件， 而在JavaScript入口點中沒有引用CSS文件。

如前所述，您可以通過將樣式表添加為入口點之一來完成此操作。 這種方法的問題在於，Webpack會生成一個附加的JavaScript文件，否則該文件將在沒有提取文本Webpack插件的情況下存儲CSS的情況下保存CSS（從而使您的JavaScript大部分為空）。 為了解決這個問題，您可以在入口點定義本身中調用裝載程序。 隨后，我不使用Extract Text Webpack插件，而是使用file-loader 。

這是一個如何完成此操作的詳盡示例。 請記住，此示例在ES2015中。

這是我的webpack.config.babel.js ：

import HtmlWebpackPlugin from 'html-webpack-plugin'
import neat from 'node-neat'
import path from 'path'
import webpack from 'webpack'

const sourcePath = path.resolve(__dirname, 'src')
const jsPath = `${sourcePath}/js`
const pugPath = `${sourcePath}/pug`
const sassPath = `${sourcePath}/scss`
const outputPath = path.resolve(__dirname, 'dist')
const neatPaths = neat.includePaths.map((path) => {
  return `includePaths[]=${path}`
}).join('&')

export default {
  devServer: {
    inline: true
  },
  entry: [
    `${jsPath}/index.js`,
    `file-loader?name=styles.css!sass-loader?${neatPaths}!${sassPath}/styles.scss`
  ],
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        test: /\.js$/
      },
      {
        loader: 'pug-html-loader',
        test: /\.pug$/
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: outputPath
  },

  plugins: [
    // Webpack Plugins
    new webpack.optimize.UglifyJsPlugin({
      mangle: false
    }),

    // Main Template
    new HtmlWebpackPlugin({inject: 'body', template: `${pugPath}/index.pug`})
  ],
  resolve: {
    extensions: ['.css', '.js', '.pug', '.scss']
  }
}

如您在入口點定義中看到的，我直接從那里調用裝載程序。 這將生成一個新的.css文件，而無需在代碼中引用它。 另外，我放棄了Extract Text Webpack插件的所有用法，並使用文件加載器來生成新文件。