标签: webpack-dev-server

我正在尝试将webpack-dev-server与浏览器同步集成,使用代理选项和gulp作为任务主机...收到此错误

TypeError: this.sockWrite is not a function
  at /.../node_modules/webpack-dev-server/lib/Server.js:29:8
  at Compiler.applyPlugins (/.../node_modules/tapable/lib/Tapable.js:26:37)
  at Compiler.compile (/.../node_modules/webpack/lib/Compiler.js:390:7)
  at Watching.<anonymous> (/.../node_modules/webpack/lib/Compiler.js:46:17)
  at Compiler.next (/.../node_modules/tapable/lib/Tapable.js:67:11)
  at Compiler.invalidAsyncPlugin (/.../node_modules/webpack-dev-middleware/middleware.js:80:3)
  at Compiler.applyPluginsAsync (/.../node_modules/tapable/lib/Tapable.js:71:13)
  at Watching._go (/.../node_modules/webpack/lib/Compiler.js:44:16)
  at Watching.<anonymous> (/.../node_modules/webpack/lib/Compiler.js:36:8)
  at Compiler.readRecords (/.../node_modules/webpack/lib/Compiler.js:302:10)
  at new Watching (/.../node_modules/webpack/lib/Compiler.js:33:16)
  at Compiler.watch (/.../node_modules/webpack/lib/Compiler.js:161:17)
  at module.exports (/.../node_modules/webpack-dev-middleware/middle

配置文件的相关部分附在下面:

gulpfile.js

var webpack = require('webpack')

webpack_dev_server(webpack(webpack_config), {
    hot: true,
    publicPath: webpack_config.output.path,
    stats: {
      color: true
    }
  }).listen(8080, 'localhost', function(err) {
    if (err) {
      throw plugins.util.PluginError('webpack-dev-server', err);
    }
  });

和webpack.config

module.exports = {
  cache: …

我的项目结构是:

/src/styles/main.scss

@import 'materialize/sass/materialize.scss';

....

我也试着@import './materialize/sass/materialize.scss';在这里工作.

它只在我在index.js中导入lib时才有效

/src/index.js(这有效)

import './styles/reset.css';
import './styles/main.scss';
import './styles/font-awesome/font-awesome.scss';

webpack loader:

loaders: [
  {
    test: /\.js?/,
    exclude: [/node_modules/, /styles/],
    loaders: ['babel'],
    include: path.join(__dirname, 'src')
  },
  {
    test: /\.scss$/,
    loader: 'style!css!sass'
  },
  {
    test: /\.css$/,
    loader: "style-loader!css-loader"
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
  },
  {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
  }

]

但得到错误:

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Thin.eot in E:\Project\simple-redux
-boilerplate\src\styles
 @ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:73945-73987 6:74010-74052

ERROR …

我目前正在尝试使用命令set NODE_ENV=production && webpack(Window User)运行 webpack但是 src 目录中没有名称为 bundle.js 的输出，实际上没有输出文件。

到目前为止，我只使用了 webpack-dev-server，所以这是我第一次尝试使用插件构建配置文件。我试过的 webpack-dev-server 运行正常。

src 文件夹包含我的所有文件，包括 html 和 javascript。

我需要一个带有工作缩小和压缩代码的输出文件。请帮助和建议！

下面是在终端中找到的

Hash: 09ea2200290287327c75
Version: webpack 1.13.2
Time: 6976ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.48 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
   [1] ./src/index.js 2.73 kB {0} [built]
    + 12 hidden modules

我确实有一个具有以下配置的 webpack.config.js 文件。

const path = require('path');
const webpack = require('webpack');
const debug = process.env.NODE_ENV !== "production";

module.exports = {
  entry: [ …

是否可以为 webpack-dev-server 找到一个未使用的端口？我当前的配置看起来像：

devServer: {
    historyApiFallback: true,
    inline: true,
    host: '0.0.0.0',
    port: 3000,
    contentBase: helpers.root('public'),
    stats: 'minimal'
}

我正在package.json文件中使用此配置来运行webpack开发服务器。我也想使用构建命令，但是它对我不起作用

{
  "name": "Demo",
  "version": "1.0.0",
  "description": "Demo App",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot",
    "build": "webpack --watch"
},

npm start 命令工作正常，但构建不是

如果我设置一个非常简单的webpack项目并安装webpack-dev-server,当我从命令行或通过npm脚本运行"webpack-dev-server --open"时,默认情况下会重新加载.即只要我编辑源文件,就会重建捆绑包并自动重新加载浏览器.

但是,如果我使用Node API来启动webpack-dev-server,请使用以下代码:

const WebpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const webpackConfig = require('../webpack.config.dev');
const open = require('open');

const port = 3000;

let compiler = webpack(webpackConfig);
let server = new WebpackDevServer(compiler, {
  contentBase: "./src",
});

server.listen(port, "localhost", function(err) {
  if(err){
      console.log(err);
  }
  else{
      open('http://localhost:' + port);
  }
});

我放松了实时重装.当我更改源文件时,我可以看到webpack从命令行输出重建包,但浏览器不会刷新.

请注意,在我的情况下,不需要热模块重新加载,实际上是不可取的.我只是希望页面在使用webpack-dev-server CLI时完全按照默认情况进行刷新.

我正在尝试使用MongoDB创建一个简单的React博客应用程序来存储帖子,但是当我尝试将Mongoose模型导入我的NewPost组件时,webpack将无法编译.

以下是错误:

WARNING in ./node_modules/mongoose/lib/drivers/index.js
10:13-49 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/require_optional/index.js
82:18-42 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/require_optional/index.js
90:20-44 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/require_optional/index.js
97:35-67 Critical dependency: the request of a dependency is an expression

ERROR in ./node_modules/mongodb/lib/gridfs/grid_store.js
Module not found: Error: Can't resolve 'fs' in 'D:\mydocs\webdev\gitprojs\ReactBlogFinal\node_modules\mongodb\lib\gridfs'
 @ ./node_modules/mongodb/lib/gridfs/grid_store.js 42:7-20
 @ ./node_modules/mongodb/index.js
 @ ./node_modules/mongoose/lib/drivers/node-mongodb-native/binary.js
 @ ./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js
 @ …

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

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

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

./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff中的错误1：4模块解析失败：意外字符''（1：4）您可能需要适当的加载程序来处理此文件类型。（此二进制文件省略了源代码）

WOFF文件无法加载，我不知道文件加载器为何无法加载WOFF，WOFF2和SVG。

这是我的Webpack 4加载程序配置：

module: {
        rules: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
                exclude: /node_modules/,
                loader: "file-loader"
            },
            {
                test: /\.(eot|ttf)$/,
                loader: "file-loader",
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader'
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    }

请给我一个解决方案。

我有一个相当简单的webpack设置，但有些曲折。我可以通过几种不同的方式来创建预期的行为，但是我想知道是否有更好的方法（对于Webpack，我还是很新的）。

我有一个基本的TypeScript / Scss应用程序，所有src文件都存在于src目录中。我还有一个组件库捆绑包，它是通过一个单独的构建过程（通过Node触发）动态生成的。该捆绑包也结束于src目录中（它包含一些sass变量和属于的其他一些资产src）。这是src/custom-library-bundle。我当前的Webpack设置通过将相应的捆绑文件移动到public（dist）目录CopyWebpackPlugin。我的webpack开发服务器监视更改并按预期重新加载。这一切都很漂亮。

现在为扭曲。我已经建立了一个自定义监视程序，该监视程序存在于其他地方，以监视自定义组件库包的更改。当在那里发生更改时，它将触发上述自定义构建过程。（如预期的那样）这将修改src/custom-library-bundle目录，并在填充捆绑软件时启动多个监视/重新加载。技术上可行吗？这是预期的行为，但是理想情况下，我可以告诉它等待定制安装工作“完成”，然后才触发编译/重新加载。

ew 这不是一个容易解释的人。这是一个webpack配置，希望（希望）有助于阐明：

devServer: {
  contentBase: path.join(__dirname, 'public'),
  port: 9000,
  host: '127.0.0.1',
  after: (app, server) => {
    new MyCustomWatcherForOtherThings().watch(() => {
      // invoked after the src/custom-library-bundle is done doing its thing (each time)
      // now that I know it's done, I want to trigger the normal compilation/reload
    })
  },
  watchOptions: {
    ignored: [
      /node_modules/
      // I've been experimenting …