Question

我是webpack的新手。我用它来捆绑aurelia应用程序网站。

它捆绑了html，它还会找到所有图像并将它们放入dist文件夹中。这可以正常运行并运行。

现在我想以同样的方式捆绑css。我期待css像图像一样被移动到'dist'文件夹。

然而，当我运行build时，css似乎没有得到webpack的处理。没有关于像图像一样找到css的消息。

这是我期待webpack处理的内容：

<link href="../css/main.css" rel="stylesheet">

我做错了吗？

const path = require("path");
const {AureliaPlugin} = require("aurelia-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: { main: "aurelia-bootstrapper" },

  ///dev
  devtool: 'source-map',

  ///Prod
  //devtool: 'source-map',

  output: {
    path: path.join(__dirname, "wwwroot", "dist"),
    filename: "app.js",
    publicPath: "/dist/",
  },

  resolve: {
    extensions: [".js"],
    modules: ["App", "node_modules"],    
  },

  module: {
    rules: [
        { test: /\.html$/i, loaders: "html-loader" },
        { test: /\.css$/, loader: "style-loader!css-loader" },      {
          test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader", options: {
              name: './images/[name].[hash].[ext]',
          }
        }
     ]
  },

  plugins: [
      new AureliaPlugin()
  ]
};

Answer 1

默认情况下，css将嵌入到app.js.如果要将它们分开，请将css-loader与ExtractTextPlugin结合使用：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module: {
    rules: [
        {
            test: /\.css$/,
            exclude: /node_modules/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }
    ]
},
plugins: [
    new ExtractTextPlugin("styles.css")
]

还要注意在html文件中引用添加的css：

   <link rel="stylesheet" href="/dist/styles.css">

https://github.com/webpack-contrib/extract-text-webpack-plugin

用webpack捆绑css

1 个答案: