标签: webpack-4

当您执行 CI 并使用 webpack 打开一个小窗口来监视您的文件时，有时很难看出 webpack 是否已检测到您的更改（此处为 Windows 10）。

所以我用 --display=minimal 减少了输出。但现在输出只是“33个模块”。看起来都一样。

我想在输出中添加时间戳，以便我可以区分它们。

webpack3 有一个解决方案，它会在 webpack4 中给你一个 DeprecationWarning ：

Tapable.plugin is deprecated. Use new API on `.hooks` instead

所以请不要使用这个：

--do not use this in webpack4--  

module.exports = {
  plugins: [
    this.plugin('done',function(){/*...*/})
  ]
}

--do not use this in webpack4--

我错过了一条迁移路径。

我正在开发一个插件，该插件从模块中收集具有特定名称的导出。我已经通过解析器导出挂钩从各个文件中获取了数据，但我似乎无法找出如何提取解析器正在操作的实际模块。

// hook into the module factory and get the exports
compiler.hooks.normalModuleFactory.tap(pluginName, factory => {
    factory.hooks.parser.for('javascript/auto').tap(pluginName, parser => {
                    parser.hooks.export.tap(pluginName, (node) => {
                        this.parseMetadataNode(node);
                    });
    });
});

parseMetadataNode 是实际提取导出的方法，该方法运行良好。

如何找到节点正在操作的模块或 userRequest？我需要该节点的文件名！

我看到一个与 Bootstrap 中未找到的一堆 .eot 字形相关的错误。我收到两个我认为相关的错误。一堆无法解析或字形不存在的错误，与有关字段browser不包含有效别名配置的错误混合在一起。

我已经包含了完整的错误消息以及 babelrc 文件和 webpack 配置。我还将在下面包含更长的 package.json 以防相关。

错误表明它正在寻找如下路径：

/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot

然而实际路径应该是：

/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot

错误：

ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/.bootstraprc-3-default","bootstrapPath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js)
Module not found: Error: Can't resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
  using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/package.json (relative path: ./assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration …

我有自己的json-loader,我想使用它而不是内置的加载器.这曾经在webpack-3中工作; 在webpack-4中,我的加载器被调用,但结果被传递给内置加载器,然后错误输出,因为它被提供的是JS源,而不是json.如何防止被调用的json-loader被调用？我的webpack.cofig.ts看起来像这样:

import * as webpack from 'webpack'
import * as path from 'path'

const config = {
  mode: 'production',
  node: { fs: 'empty' },
  resolveLoader: {
    alias: { 'custom-json-loader': 'zotero-plugin/loader/json' },
  },
  module: {
    rules: [ { test: /\.json$/, use: [ 'custom-json-loader' ] } ],
  },

  // ...
}

export default config

我正在构建一个webpack自动化工作流。我完成了开发服务器。我所有的开发配置都在webpack.config.js文件中。

然后，我package.json通过将其添加到脚本中'dev':'webpack-dev-server'

一个人如何在单独的文件中进行生产配置？

Webpack v4引入了两组默认值：production和development。我的问题是：有没有办法在配置文件中引用那些文件？我知道我仍然可以通过以下方式传递环境变量：

--env.NODE_ENV=development

通过这样做，我想我有两个独立的环境变量，感觉不对。显然，另一个选择是引用不同的配置文件，这似乎也不是简单配置的最佳解决方案。

我在这里想念什么吗？

如何在webpcak 4中将loader用于mp4视频格式，我尝试这样：

       {
            test: /\.mp4$/,
            use: 'file-loader',
            loader: 'file-loader?name=videos/[name].[ext]',
        },

然后像这样导入

import pressButtonAnimated from './images/pressButtonAnimated.mp4'

但这对我不起作用，并且出现错误 You may need an appropriate loader to handle this file type.

但这是对我有用的，但我不想在每个文件中添加

import pressButtonAnimated from '-!file-loader!./images/pressButtonAnimated.mp4'

我正在尝试将Webpack 4用于我的项目。除了extract-text-webpack-plugin.

实际行为：当我构建项目时，根本没有错误，并且缩小了文件

预期行为：styles.css在dist文件夹中获取缩小的 CSS 文件 ( )

输出

文件结构

配置文件

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

module.exports = {
    entry: {
        'index': './src/index.js',
    },
    resolveLoader: {
        modules: [
            'node_modules',
        ],
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            minimize: true,
                        },
                    },
                ],
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract( 'css-loader' ),
            },
            {
                test: …

我已经更新了我的webpack文件。现在，不会将我的自定义样式应用于主样式包。没有错误，捆绑中缺少自定义样式的类。当我运行带有development模式的构建时，一切正常，并且样式存在于捆绑包中。这种情况仅在productionbuild中发生。

我extract-text-webpack-plugin改为尝试，mini-css-extract-plugin但结果是相同的-在产品构建中，我的样式丢失了。

我将非常感谢任何帮助。

这是文件：

webpack.config.js

const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const lessToJs = require('less-vars-to-js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const publicPath = 'public';
const themeVariables = lessToJs(
  fs.readFileSync(path.join(__dirname, './assets/style/ant-theme-vars.less'), 'utf8'),
);

module.exports = (env, options) => {
  const mode = env ? env.mode : options.mode;
  return {
    entry: './assets/app.jsx',
    output: {
      path: path.resolve(__dirname, publicPath), …

我正在尝试通过 webpack 4.29.0 使 Bootstrap 4.2.1、jQuery 3.3.1 和 Popper.js 1.14.7 工作。

我的 main.js：

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/tooltip';
import '@fortawesome/fontawesome-free';

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

我的 webpack.config.js

var webpack = require('webpack');
var path = require("path");
var _ = require("lodash");
var autoprefixer = require("autoprefixer");

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


const nodeEnv = process.env.NODE_ENV || 'development';
const isDev = nodeEnv !== 'production';

var webpackFailPlugin = function () {
  this.plugin("done", function (stats) {
    if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf("--watch") === -1) { // eslint-disable-line
      process.on("beforeExit", …