标签: extracttextwebpackplugin

版本

"extract-text-webpack-plugin":"^ 2.0.0-rc.2",

"webpack":"^ 2.2.0",

"webpack-dev-server":"^ 2.2.1"

问题

"extract-text-webpack-plugin":"^ 1.0.1",

"webpack":"^ 1.14.0",

"webpack-dev-server":"^ 1.16.2"

自从升级到版本2后不再能够HMR css/scss,更改样式会触发更改(请参阅下面的输出示例),但是我必须手动刷新页面以查看页面不会自动刷新的更改,如果我创建了更改scss文件后更改为js文件然后更改将反映为js更改触发HMR,其中还包括样式更改,但只更改样式而不更改js需要手动页面刷新.

任何想法,如果我配置了错误或我需要做什么让css/scss HMR工作？

我也在这里发布了这个问题:https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384但不确定它是否是webpack-dev-server问题或者是extract-text-webpack -plugin问题或者只是我做过的事情.

命令运行:

npm run dev

"scripts": {
    "dev": "webpack-dev-server --hot --inline"
  }

升级前配置:

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

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');

let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin('styles/[name].css', { allChunks: true }); …

使用带有extract-text-webpack-plugin的css-loader中的css modules选项,Webpack 2 build在生产模式下无法正常工作.

在html元素上创建了正确的生成类,这意味着css-loader正在按预期工作,但是extract-text-webpack-plugin中提取的css文件缺少css标识符.

我正在使用一种方法来实现全局css和css模块,如下所述:https://github.com/css-modules/css-modules/pull/65 和这里:https://github.com/kitze/custom-react-scripts/issues/29.

我正在对以.css结尾的文件和以.cssm.css结尾的文件使用不同的加载器测试,表明它们应该使用模块加载.

配置的相关部分:

const extractTextPlugin = new ExtractTextPlugin({filename: '[name].[id].[contenthash].css', allChunks: true});

return {
    module: {
        rules: [
            {
                test: /\.cssm.(css|less)$/,
                loader: extractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: [
                        {
                            loader: 'css-loader',
                            query: {
                                importLoaders: 1,
                                modules: true,
                                localIdentName: '[name]_[local]_[hash:base64:5]'
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            query: {
                                ident: 'postcss',
                                plugins: function() {
                                    return [
                                            require('autoprefixer')
                                    ];
                                }
                            }
                        },
                        {
                            loader: 'less-loader'
                        }
                    ]
                })
            },
            {
                test: /\.(css|less)$/,
                include: …

我有一个简单的多页面应用程序有三页,我webpack.config.js entry看起来像:

{
  entry: {
    a: 'pages/a.js',
    b: 'pages/b.js',
    c: 'pages/c.js',
  }
}

每个页面都包含几个React组件,其中一些组件在第一次渲染时可以在首页看到,其中一些组件在视图之外.

我想以声明的方式定义每个页面/条目的哪些组件是"关键的"(在首页上),并将CSS提取到一个单独的文件中.就像是:

{
  a: ['compononents/button/style.css', ...],
  b: ['compononents/title/style.css', ...],
  c: ['compononents/header/style.css', ...]
}

输出类似于:

- dist/a.critical.css
- dist/b.critical.css
- dist/c.critical.css

我一直在使用extract-text-webpack-plugin,但似乎找不到告诉它只在特定条目的上下文中提取特定CSS的方法.

如何在特定条目/页面的上下文中提取特定的CSS文件内容？

使用webpack 2(或3)时,我可以编写如下代码:

const coreStyles = new ExtractTextPlugin('./styles/core.bundle.css');
const componentStyles = new ExtractTextPlugin('./styles/components.bundle.css');

rules: [
{
   test: /\.scss$|\.css$/,
   include: path.resolve(__dirname, './styles/App.scss'),
   use: coreStyles.extract({
       use: ['css-loader', 'sass-loader']
   })
},
{
   test: /\.scss$|\.css$/,
   exclude: path.resolve(__dirname, './styles/App.scss'),
   use: componentStyles.extract({
       use: ['css-loader', 'sass-loader']
   })
}
]

结果,我输出了2个css文件.

我怎么能达到相同的mini-css-extract-plugin？根据文档,我只能指定一个文件名:

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

谢谢.

我正在开发一个Webpack插件,它基本上css在块中寻找资源,当它找到这样的资产时,在它上面应用一些postCSS返回2个输出的插件,应该继续使用它来提取Extract-Text-Plugin,其他输出应该成为一个新的模块内部块,它注入到头部上运行.

我没有设法实现的唯一部分是在现有 Chunk 中创建新模块的部分.有一些指示/想法？

我设法创建了一个新的块,但没有webpack包装器,这意味着我无法支持HMR用于那块css并且懒得加载它.

class ExtractTPAStylePlugin {
  constructor(options) {
    this._options = Object.assign({
      pattern: [
        /"\w+\([^\)]+\)"/
      ]
    }, options);
  }

  extract(compilation, chunks) {
    const promises = [];

    chunks.forEach((chunk) => {
      promises.push(
        chunk.files
          .filter(fileName => fileName.endsWith('.css'))
          .map(file => postcss([extractStyles(this._options)])
            .process(compilation.assets[file].source(), {from: file, to: file})
            .then((result) => {
              compilation.assets[file] = new RawSource(result.css);

              const filename = file.replace('.css', fileSuffix);
              const newChunk = new Chunk(filename);
              newChunk.files = [filename];
              newChunk.ids = …

在尝试在我们的应用程序中实现页面优化时,我们希望能够为每个webpack块生成单独的CSS文件,以提高应用程序中第一页的页面呈现性能.为此,我们一直在尝试将extract-text-plugin与require.ensure结合使用,如下所示:

const $ = require('load-webpack-plugins')();
module.exports = {
  entry: { 'app': './src/app.js' },
  output: {
    path: 'dist',
    filename: '[name].js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /\.js$/, use: [{ loader: 'babel-loader' }] },
      {
        test: /\.css$/,
        use: $.ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{ loader: 'css-loader' }]
        })
      }
    ]
  },
  plugins: [
    new $.ExtractTextPlugin({ filename: '[name].[contenthash].css', allChunks: true }),
    new $.NamedModulesPlugin(),
  ]
}

app.js是:

console.log('this is app.js');

require.ensure([], require => {
  require('./a.css');
}, 'base');

require.ensure([], require => {
  require('./b.css'); …

我正在进行从 webpack 3 升级到 webpack 5 的项目。在该项目中，它使用 raw-loader 和 extract-text-webpack-plugin 来解析导入的 html 文件（角度组件），然后合并所有 html 文件并输出一个单独的 html。这是 webpack 配置片段\xef\xbc\x9a

.\n.\n.\n# initialize the extractText plugin\nconst extractHTML = new ExtractTextPlugin({\n    filename: `${assetsPattern}.[contenthash].html`,\n    allChunks: true\n.\n.\n.\n# setup the loader\n{\n    test: /\\.html$/,\n    loader: extractHTML.extract('raw-loader')\n}\n.\n.\n.\n

由于它是定制的应用程序，我需要将 html 作为单个文件。

但在 webpack 5 中，extract-text-webpack-plugin 已被弃用。这个插件的推荐替代品是 mini-css-extract-plugin，但它是为 css 指定的，似乎不适用于其他文件类型。通过使用 webpack 5 中的 asset 模块（asset/resource），它将输出多个 html 文件。

目前我被这个问题阻止了，有没有 extract-text-webpack-plugin 的替代品可以满足我的要求？或者还有其他解决方案吗？

我在webpack 4中使用extract-text-webpack-plugin提取了css.CSS已被提取但是当我运行npm run build时,css被提取但我在屏幕上显示一条消息说

Entrypoint undefined = extract-text-webpack-plugin-output-filename.

整个堆栈跟踪如下:

$ npm run build

> comp@1.0.0 build /media/azeem/A036C96E36C945CE/DevlopersConsole/Projects/comp
> webpack

Hash: 81ca52e4a0297e3e830f
Version: webpack 4.7.0
Time: 52303ms
Built at: 2018-05-06 23:13:09
       Asset      Size  Chunks             Chunk Names
   bundle.js  4.06 KiB    main  [emitted]  main
css/main.css  58 bytes    main  [emitted]  main
Entrypoint main = bundle.js css/main.css
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/main.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/main.scss 197 bytes [built]
[./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js!./node_modules/sass-loader/lib/loader.js!./src/one.scss] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/one.scss 183 bytes [built]
[./src/app.js] 162 bytes {main} [built]
[./src/main.scss] 41 bytes [built]
[./src/one.scss] 41 bytes [built]
[0] multi ./src/app.js ./src/main.scss 40 …

当使用ASP.NET Core和Webpack创建新的Web项目时，我收到来自yarn的依赖项警告extract-text-webpack-plugin。

我的重现步骤：

1. dotnew new web
2. yarn init
3. yarn add --dev webpack webpack-cli
4. webpack init

显示以下警告消息：

警告“> extract-text-webpack-plugin@3.0.2”具有不正确的对等依赖项“ webpack@^3.1.0”。

5. webpack

显示以下错误消息：

（节点：19320）弃用警告：不推荐使用Tapable.plugin。在'.hooks'上使用新的API代替D：\ SRC \ MISC \ WebpackTest \ node_modules \ webpack \ lib \ Chunk.js：460抛出新错误（^

错误：Chunk.entrypoints：使用Chunks.groupsIterable并按条目的instanceof进行过滤，而不是在D：\ SRC \的Chunk.get（D：\ SRC \ MISC \ WebpackTest \ node_modules \ webpack \ lib \ Chunk.js：460：9） MISC \ WebpackTest \ node_modules \ extract-text-webpack-plugin \ dist \ index.js：176：48 at Array.forEach（）at D：\ SRC \ MISC \ WebpackTest \ node_modules \ extract-text-webpack-plugin \ dist \ index.js：171：18在AsyncSeriesHook.eval …