Question

我有一个非常简单的设置，它使用Webpack（1.14.0）和Extract Text Webpack Plugin（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和Extract Text Webpack插件的版本应该是兼容的（Extract Text Webpack插件的peerDependency是^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文件，否则将存储CSS的Extract Text Webpack插件没有删除它（留下你一个空的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 Plugin的所有用法，并使用了文件加载器来生成新文件。

提取文本Webpack插件不会生成工件

2 个答案: