0

我有一个非常简单的设置，它使用 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 Plugin 的版本应该兼容（peerDependencyExtract Text Webpack Plugin 的版本是^1.9.11）。

我在这里想念什么？

4

2 回答 2

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()构造函数。这不是没有生成文件的原因，但我也做错了。它只需要是文件名。自动引用输出属性路径。

于 2017-01-04T22:11:21.867 回答
0

所以经过大量的返工，我想我终于想出了一个比我最初使用的解决方案要好得多的解决方案。为了阐明目标是什么，我想使用 Webpack 生成一个单独的样式表文件，而不需要在 JavaScript 入口点中引用 CSS 文件。

如前所述，您可以通过将样式表添加为入口点之一来完成此操作。这种方法的问题在于，Webpack 会生成一个额外的 JavaScript 文件，否则该文件会存储 CSS，而 Extract Text Webpack 插件没有删除它（给您留下的 JavaScript 几乎是空的）。为了解决这个问题，您可以在入口点定义本身中调用加载程序。随后，我不使用提取文本 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 的所有用途，并使用 file-loader 来生成新文件。

于 2017-01-25T17:16:23.783 回答