webpack 使用 extract-text-webpack-plugin 将 css 提取到单独的文件中

kkdeveloper7

我正在尝试.css使用 webpack 将所有内容提取到一个单独的文件中。为此,我正在使用xtract-text-webpack-plugin.

出于某种原因,我在运行 web pack 后没有得到任何文件。

这是我的 webpack.config 文件

var path = require('path');
var webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const css = new ExtractTextPlugin('styles/[name].css');

module.exports = {
    entry: [
        './App/main.js'
    ],
    output: {
        path: path.join(__dirname, '/wwwroot/js/'),
        filename: '[name].js',
    },
    resolve: {
        extensions: ['.css']
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
        }]
    },
    plugins: [
        css
    ],

}

这是我在控制台中得到的输出

Hash: 81acf65502ca13764b09
Version: webpack 3.2.0
Time: 71ms
  Asset     Size  Chunks             Chunk Names
main.js  2.62 kB       0  [emitted]  main
   [0] multi ./App/main.js 28 bytes {0} [built]
   [1] ./App/main.js 27 bytes {0} [built]

.css我的 wwwroot 文件夹中没有文件。知道为什么会这样吗?

这是package.json文件

"dependencies": {},
  "devDependencies": {
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "webpack": "^3.2.0"
  }

谢谢!

kkdeveloper7

我能够弄清楚这一点。

我的 webpack 配置是正确的。

有两种方法可以做到这一点

您可以要求的第一种方式.scss,它将为 css 文件提供一个入口点。

第二种方法可以在 webpack 中创建第二个入口点

 entry: {
        index: "./scripts/index.js",
        vendor: "./styles/yourcss.css"
    }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用webpack 2将.scss文件提取到.css中

来自分类Dev

Webpack Extract Text Plugin - Webpack Node API 中的 css-loader 问题

来自分类Dev

Webpack:mini-css-extract-plugin不输出CSS文件

来自分类Dev

extract-text-webpack-plugin-提取scss结果在main.css.map中没有映射

来自分类Dev

使用webpack,less-loader和extract-text-webpack-plugin避免输出重复

来自分类Dev

Webpack:将 css 提取到它自己的包中

来自分类Dev

为没有HTML的webpack mini-css-extract-plugin提取文件创建链接标签

来自分类Dev

错误:找不到模块“ extract-text-webpack-plugin”

来自分类Dev

Webpack样式加载器与mini-css-extract-plugin

来自分类Dev

mini-css-extract-plugin加载器上的Webpack错误

来自分类Dev

使用webpack捆绑CSS

来自分类Dev

使用 webpack 将 css 移动到 angular 4 组件中的外部文件

来自分类Dev

使用Webpack从节点模块加载CSS文件

来自分类Dev

使用Webpack导入CSS和JS文件

来自分类Dev

将 css 模块导入 Webpack

来自分类Dev

如何使用Webpack 4将sass编译为CSS?

来自分类Dev

尝试使用 webpack 4 从 scss 文件中获取 css 文件

来自分类Dev

将哈希添加到CSS Webpack中的图像

来自分类Dev

使用 Laravel mix (Webpack) 将 CSS 中引用的特定字体复制到目标文件夹

来自分类Dev

如何使用python将.csv文件中的行数据提取到单独的.txt文件中?

来自分类Dev

Webpack:从SCSS到CSS文件

来自分类Dev

Webpack不建立css文件

来自分类Dev

Webpack 1.12:捆绑CSS文件

来自分类Dev

Webpack,CSS:将图像放置在哪里?

来自分类Dev

使用Webpack将JSON捆绑为纯JSON文件

来自分类Dev

使用webpack将证书文件导入为字符串

来自分类Dev

如何在Webpack中使用CSS中的图像

来自分类Dev

使用PowerShell将工作表从Excel提取到单独的文件中

来自分类Dev

使用Gradle将zip文件依赖项提取到单独的目录中

Related 相关文章

  1. 1

    使用webpack 2将.scss文件提取到.css中

  2. 2

    Webpack Extract Text Plugin - Webpack Node API 中的 css-loader 问题

  3. 3

    Webpack:mini-css-extract-plugin不输出CSS文件

  4. 4

    extract-text-webpack-plugin-提取scss结果在main.css.map中没有映射

  5. 5

    使用webpack,less-loader和extract-text-webpack-plugin避免输出重复

  6. 6

    Webpack:将 css 提取到它自己的包中

  7. 7

    为没有HTML的webpack mini-css-extract-plugin提取文件创建链接标签

  8. 8

    错误:找不到模块“ extract-text-webpack-plugin”

  9. 9

    Webpack样式加载器与mini-css-extract-plugin

  10. 10

    mini-css-extract-plugin加载器上的Webpack错误

  11. 11

    使用webpack捆绑CSS

  12. 12

    使用 webpack 将 css 移动到 angular 4 组件中的外部文件

  13. 13

    使用Webpack从节点模块加载CSS文件

  14. 14

    使用Webpack导入CSS和JS文件

  15. 15

    将 css 模块导入 Webpack

  16. 16

    如何使用Webpack 4将sass编译为CSS?

  17. 17

    尝试使用 webpack 4 从 scss 文件中获取 css 文件

  18. 18

    将哈希添加到CSS Webpack中的图像

  19. 19

    使用 Laravel mix (Webpack) 将 CSS 中引用的特定字体复制到目标文件夹

  20. 20

    如何使用python将.csv文件中的行数据提取到单独的.txt文件中?

  21. 21

    Webpack:从SCSS到CSS文件

  22. 22

    Webpack不建立css文件

  23. 23

    Webpack 1.12:捆绑CSS文件

  24. 24

    Webpack,CSS:将图像放置在哪里?

  25. 25

    使用Webpack将JSON捆绑为纯JSON文件

  26. 26

    使用webpack将证书文件导入为字符串

  27. 27

    如何在Webpack中使用CSS中的图像

  28. 28

    使用PowerShell将工作表从Excel提取到单独的文件中

  29. 29

    使用Gradle将zip文件依赖项提取到单独的目录中

热门标签

归档