Webpack没有将css复制到dist答案

【问题标题】：Webpack not copying css into distWebpack没有将css复制到dist
【发布时间】：2018-06-11 00:48:28
【问题描述】：

我有以下 css 文件：

<link rel="stylesheet" href="style/select.css">
<link rel="stylesheet" href="style/site.css">

以及下面的 webpack 配置

var path   = require("path");
module.exports = {
  entry: {
    app: './src/index.js'
  },

  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: '[name].js',
  },

  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        test:    /\.html$/,
        exclude: /node_modules/,
        loader:  'file-loader?name=[name].[ext]',
      },
      {
        test:    /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader:  'elm-webpack-loader?verbose=true&warn=true',
          options: {debug: true, warn: true},
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      },
    ],

    noParse: /\.elm$/,
  },

  devServer: {
    inline: true,
    stats: { colors: true }
  },
  resolve: {
    mainFields: [ 'main'],
  }
};

当我使用 webpack-dev-server 时，内存文件服务器似乎有正确的 css 文件。但是当我打电话时

纱线构建

它不会复制我的 dist 文件夹中的 css 文件，因此无法加载 css 文件。

【问题讨论】：

标签： javascript webpack webpack-dev-server yarnpkg webpack-style-loader

【解决方案1】：

您是否在模块中导入 css 文件？我认为您需要使用 ExtractTextWebpackPlugin 将 js 包中的 css 提取到单独的 css 文件中。

这不适用于 webpack-dev-server，因此您需要在用于开发服务器的配置中禁用该插件。有一个选项可以让你这样做：

  new ExtractTextPlugin({
    filename: '[name].css',
    disable: true,
  }),

【讨论】：

我没有在我的模块中导入。我通常在 html 中链接它。
哦，我明白了。好吧，在那种情况下，他们甚至不通过 webpack。 css-loader 插件允许直接在你的 javascript 模块中导入 CSS 文件。像这样import style from './style.css'. 然后style-loader 插件通过注入

【解决方案2】：

试试这个配置到 webpack 4，对于装载机：

use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: {modules:true, importLoaders: 1 } },
          { loader: 'postcss-loader', options: {
              ident: 'postcss',
              plugins: () => [
                postcssPresetEnv(/* pluginOptions */)
              ]
            } }
        ]

插件部分：

 new MiniCssExtractPlugin({
      filename: '[name].css' }),

【讨论】：