6

我对 express + webpack 比较陌生，所以我不清楚这是不是有意的，如果不是，如何正确配置它。问题在于使用 mini-css-extract-plugin 时创建的附加资产和入口点。

网络包配置：

Extract = require('mini-css-extract-plugin');
path = require('path');
Write = require('write-file-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    demo_scripts: path.resolve('server', 'scripts', 'demo.js'),
    demo_styles: path.resolve('server', 'styles', 'demo.css')
  },
  output: {
    path: path.resolve('.tmp'),
    filename: '[name].js'
  },
  plugins: [new Write(), new Extract()],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env']
            }
          }
        ]
      },
      {
        test: /\.css/,
        use: [
          {
            loader: Extract.loader
          },
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  }
};

webpack 输出

          Asset      Size        Chunks             Chunk Names
demo_scripts.js  3.91 KiB  demo_scripts  [emitted]  demo_scripts
demo_styles.css  36 bytes   demo_styles  [emitted]  demo_styles
 demo_styles.js  3.89 KiB   demo_styles  [emitted]  demo_styles
Entrypoint demo_scripts = demo_scripts.js
Entrypoint demo_styles = demo_styles.css demo_styles.js

我的问题是，为什么demo_styles.js要创建？尽管正在提取 css，但似乎 webpack 仍在使用 css 创建捆绑的 js，但是当我查看该文件时，其中唯一的一行是

eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./server/styles/demo.css?");

谁能帮忙解释这里发生了什么？

更新

如果我删除 demo_styles 入口点，并通过插件初始化对其进行配置，则不会构建任何 CSS 资产。

({
  plugins: [
    new Write(),
    new Extract({
      filename: 'demo_styles.css'
    })
  ]
});

Asset      Size        Chunks             Chunk Names
demo_scripts.js  3.91 KiB  demo_scripts  [emitted]  demo_scripts
Entrypoint demo_scripts = demo_scripts.js

回购协议在这里（注意快递分支）https://github.com/brewster1134/bumper/tree/express

4

3 回答 3

0

您的问题有两种解决方法。对于这两者，您需要更改entryWebpack 配置文件的点。我个人更喜欢第一种选择。

选项1：

更改entry为以下内容： 

entry: {
    demo: [
        path.resolve('server', 'scripts', 'demo.js'),
        path.resolve('server', 'styles', 'demo.css'),
    ]
}

这将生成以下输出（基于您为Extract类和output部分提供的文件名：

  • 演示.js
  • demo_styles.css

选项 2：

对于此选项，您需要从该entry点删除 CSS 文件并将其导入 JS 文件中：

webpack.config.js 

...
entry: path.resolve('server', 'scripts', 'demo.js'),
...

演示.js

import './../styles.demo.css'
//rest of your JS codes

此解决方案将生成与Option1

于 2020-02-07T11:17:45.750 回答
0

Webpack 将所有内容提取到一个 js 文件中，然后 MiniCssExtractPlugin 将其从该文件中取出，留下一个带有// extracted by mini-css-extract-plugin.

我的解决方案是将你的 css 和 js 分组到 entry 部分webpack.config.js

entry: {
    demo: {
        import: [ path.join("server", "scripts", "demo.js"), path.join("server", "styles", "demo.css") ],
        filename: "demo.js", // outputs demo.js, demo.css to your output directory
    },
    main: {
        import: [ path.join("server", "scripts", "main.js"), path.join("server", "styles", "main.css") ],
        filename: "main.js", // outputs main.js, main.css to your output directory
    },
}

此外，因此命名效果很好，请将其用于您的插件部分：

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

相应地调整包“demo”和“main”以及路径。

于 2022-02-03T15:30:55.933 回答
-1

请demo_styles从您的入口点中删除它正在创建的demo_styles.js.

相反，您可以像这样注入 css 文件：

plugins: [
      new MiniCssExtractPlugin({
        filename: 'demo_styles.css',
      }),

如果问题仍然存在，请告诉我，乐于提供帮助

于 2018-08-29T08:27:52.183 回答