Webpack 不将 css 复制到 dist [英] Webpack not copying css into dist

问题描述

我有以下 css 文件:

I have the following css files:

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

和以下 webpack 配置

and the following webpack config

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 文件.但是当我打电话给

when I use webpack-dev-server, the in memory file server seems to have the correct css files. However when I call

纱线构建

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

it does not copy the css files in my dist folder and therefore fails to load the css files.

推荐答案

您是否在模块中导入 css 文件?我认为您需要使用 ExtractTextWebpackPlugin 从js 包到一个单独的 css 文件中.

Are you importing the css files in your modules? I think you need to use the ExtractTextWebpackPlugin which extract the css from the js bundle into a separate css file.

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

This will not work with webpack-dev-server though, so you need to disable the plugin in the configuration that you use for the dev server. There is an option that allows you to do that:

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

这篇关于Webpack 不将 css 复制到 dist的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！