标签: webpack-plugin

我正在尝试设置webpack以获得一个编译传递,它会扫描一个文件树中的所有css文件,然后生成一个css文件,其中包含所有样式的捆绑,autoprefixed和最小化.

我无法让autoprefixer插件工作.

这是相关的webpack配置部分:

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

// postCSS plugins
const autoprefixer = require('autoprefixer')

module.exports = [
{
  // another compilation pass
},
{
  name: 'static-css',
  entry: {
    vendor: glob.sync(path.join(__dirname, 'assets/stylesheets/vendor/**/*.css')),
    styles: glob.sync(path.join(__dirname, 'assets/stylesheets/src/**/*.css'))
  },
  devtool: 'source-map',
  output: {
    path: path.join(__dirname, 'assets/stylesheets/build/'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      // css loader for custom css
      {
        test: /\.css$/,
        include: path.join(__dirname, 'assets/stylesheets/src'),
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
      },
      // css loader …

我觉得我要实现的目标并不难..但是Webpack文档陷入严重混乱，为此我花了很多时间。

如何将“动态”模块注入Webpack版本？我想在构建时创建此模块。

举一个简单的例子，我如何在构建时将此字符串作为新模块注入？

"module.exports = new Date();"

然后，假设我希望该模块具有名称“ myDate”

我非常希望我的应用程序中的任何其他模块能够通过以下方式解决该问题：

var myDate = require('myDate');

现在，这是一个非常简单的示例。我的目的将更加复杂，涉及读取文件以创建此“动态”模块。我知道define插件，很不幸，它不符合我的需求。

我将不胜感激任何帮助。谢谢。

我正在尝试为https://github.com/martinandert/babel-plugin-css-in-js编写一个webpack插件,在开发过程中有以下两个要求:

• 我不希望将文件写入磁盘,而是让webpack-dev-server将文件托管在内存中.
• 我想热重新加载以加载新提取的CSS.

(问题在底部.)

不要写入磁盘

我已经能够使用以下代码执行此操作,但在阅读了许多不同的示例后,我仍然不能100%确定这是正确的方法.

compiler.plugin('emit', function(compilation, callback) {
  compilation.chunks.forEach(function(chunk) {
    chunk.modules.forEach(function(module) {
      if (module.resource) {
        var css = extractCSSFromFile(module.resource)
        if (css) {
          cache[module.resource] = css
        }
      }
    })
  })
  var source = Object.values(cache).join('')
  compilation.assets[bundleFile] = {
    source: function() { return source },
    size: function() { return source.length },
  }
})

热重装

我的想法是,每当CSS改变时,我都会渲染一个新版本的小模块,迫使样式表重新加载.然后我会让web pack的热模块替换替换该模块,因此实际上对提取的样式表具有HMR.此重新加载模块如下所示:

if (module.hot) {
  module.hot.accept()
  module.hot.dispose(function() {
    document.querySelectorAll('link[href="' + WEBPACK_BABEL_CSS_IN_JS_STYLESHEET_PATH + '"]').forEach(link => {
      link.href = link.href.replace(/(\?\d+)?$/, '?' + WEBPACK_BABEL_CSS_IN_JS_STYLESHEET_HASH)
    })
  })
}

使用最新CSS的哈希生成文件的webpack插件代码如下所示: …

我在Linux机器上遇到Webpack 4问题.构建在开发模式下工作正常,但在生产中失败.它似乎也在Windows机器上工作.我确实尝试将webpack降级到旧版本而没有任何内容.

Nodejs:v10.2.1

 *TypeError: Cannot read property 'length' of undefined* at node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:59
        this.workers = workers === true ? _os2.default.cpus().length - 1 : Math.min(Number(workers) || 0, _os2.default.cpus().length - 1);

packge.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "webpack -p"
  },
  "devDependencies": {},
  "dependencies": {
    "@types/node": "^10.5.1",
    "css-loader": "^0.28.11",
    "global": "^4.3.2",
    "node-sass": "^4.9.1",
    "npm": "^6.1.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.2",
    "typescript": "^2.9.2",
    "uglifyjs-webpack-plugin": "1.0.0-beta.2",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8"
  }
}

webpack.config.js

const path = require('path');
const UglifyJsPlugin = …

每个 webpack 解析插件都遵循以下结构：

resolver.plugin(this.source, function(request, callback) {
    if (something) {
         resolver.doResolve(target, obj, "aliased with mapping '" + name + "': '" + ...)
    } else {
         callback(...);
    }

谁能解释一下我什么时候应该打电话doResolve，什么时候回电。我在 webpack 文档中发现了这句话：

要将请求传递给其他解析插件，请使用 this.doResolve(types: String|String[], request: Request, callback) 方法

但是，我不知道该怎么办。似乎doResolve从头开始这个过程。下面是堆栈的样子doResolve：

你可以看到这些阶段从一开始就开始了。为什么？

背景：一个简单的单页React应用程序+ Redux + Express（以便上传到Heroku）。
我的公共文件夹中已经有index.html 和images 文件夹。我想运行 webpack 来生成我在 index.html 中使用的 styles.css 和 bundle.js。我想使用 webpack-clean-up-plugin 在每次运行构建时删除额外的先前文件，但我不希望这影响像 index.html 和 images 文件夹这样的东西。
根据文档： *选项 如果您想在输出路径中保留某些文件，例如从其他插件生成的 stats.json 文件，请使用排除数组选项。它接受小型匹配中的通配符。

// 不要删除stats.json, important.json, 以及其中的所有内容folder

new WebpackCleanupPlugin({
  exclude: ["stats.json", "important.js", "folder/**/*"],
})

目标：运行 webpack.prod.js 所以最后 public 文件夹有

• 索引.html
• 捆绑包.js
• Bundle.js.map
• 样式.css
• 样式.css.地图
• 图片（文件夹）

Webpack.config.prod.js：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')  
output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    }, 
    plugins: [
        new MiniCssExtractPlugin({ 
            filename: "styles.css", 
            chunkFilename: "[id].css"}),
         new CleanWebpackPlugin({
         exclude: …

我有一个包含不同类型依赖项的大项目：js、scss、svg、png 等...我的 webpack 已配置并捆绑了我的代码，我对此很满意。

但是我想获得所有依赖项（包括二进制文件和所有文件格式）的某种哈希值。最重要的是：我不想在此期间构建我的代码。为此，我需要，例如，所有入口点或至少某种依赖关系树中的所有文件的数组。

我尝试使用编译钩子finishModules，但它在编译后完成。还尝试了一些其他的编译器钩子，不记得究竟是哪个。

我尝试编写加载程序，但默认情况下似乎只有高级文件的源代码（如入口点本身）。

我很高兴收到一些方向来解决我的问题。

我有一个进行网络调用的功能，我希望该功能在全球范围内可用，而不必每次需要使用该功能时都导入它

请求.js

import 'whatwg-fetch';

/**
 * Parses the JSON returned by a network request
 *
 * @param  {object} response A response from a network request
 *
 * @return {object}          The parsed JSON from the request
 */
function parseJSON(response) {
  if (response.status === 204 || response.status === 205) {
    return null;
  }
  return response.json();
}

/**
 * Checks if a network request came back fine, and throws an error if not
 *
 * @param  {object} response   A response from a network …