标签: webpack-dev-server

我创建了一个 webpack 配置，它具有三个入口点，我试图在捆绑时拆分这些入口点。下面是我的webpack.config.js

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

module.exports = {
    mode: "development",
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
    context: path.resolve('js'),
    entry: {
        about: './about_page.js',
        home: './home_page.js',
        contact: './contact_page.js'
    },
    output: {
        path: path.resolve('build/js/'),
        publicPath: '/public/assets/js/',
        filename: "[name].js"
    },
    devServer: {
        contentBase: 'public'
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                    configFile: ".eslint.json"
                }
            },
            {
                test: /\.es6$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    resolve: …

如何以编程方式停止针对端口的 CLI 命令的 webpack-dev-server ？

Ctrl-C 等非常适合手动停止服务器。我们基本上是在杀死它。

是否有服务器公开的 API 以发出 STOP 命令或其他什么？

我在本地环境开发vue项目时（运行npm run dev命令），第一页加载没有报错。但是当我点击刷新按钮时，控制台输出“SyntaxError：预期表达式，得到'<'”错误，并且热重载不起作用。

index.html 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>kmf</title>
  </head>
  <body>
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="app.js"></script></body>
</html>

但是如果我运行 npm run build 并将文件上传到服务器。不输出此错误。有谁知道问题出在哪里？

我正在使用 webpack-dev-server 和 Cypress GUI 进行开发工作流，我希望 Cypress 在 WDS 自动重新加载触发的页面重新加载时自动重新运行/重新启动测试。

现在发生的是我看到 WDS 导致页面重新加载，但 Cypress 会话只是停留在它停止的地方。

我似乎无法找到一种方法来实现这一点。我没有看到任何公共（或私人）方式来触发赛普拉斯重新运行当前选定的测试。

从一个新的 Symfony 4 项目中，当我运行这个命令时：

./node_modules/.bin/encore dev-server --hot

然后我修改了一个 scss 文件（通过示例更改 body 标签背景颜色），shell 做出反应

但是我的浏览器不会自动刷新！我总是必须手动重新加载页面以查看最新的 css 更改。我可以在哪里做一个 mystake？

谢谢 ！

=> 我用不同的浏览器测试过 => 如果我修改自定义 javascript 文件，浏览器会自动刷新！相反，当我更改 scss 文件时

=> 我的资产目录结构：

=> 我的 webpack.config.js 内容：

var Encore = require('@symfony/webpack-encore');

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for …

因为text/html在我的开发系统上由 webpack 开发服务器提供MIME 类型的CSS ，Chrome 拒绝加载它们：

Refused to apply style from 'http://localhost:3000/assets/bundles/baseRequirements-a07aa....css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

我的 webpack 配置：

webpack.base.config.js

const path = require('path')
const entries = require('./entries')
const BundleTracker = require('webpack-bundle-tracker')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
  entry: entries,

  output: {
    filename: '[name]-[hash].bundle.js',
    path: path.resolve('./assets/dist/')
  },

  plugins: [
    new BundleTracker({filename: './assets/webpack-stats.json'}),
    new VueLoaderPlugin(),
    new ExtractTextPlugin({
      filename: '[name]-[hash].css',
      allChunks: …

希望你们一切都好:)

我正在使用 Nodejs 在 REST API 服务器上工作，在完成 alpha 版本后，我想用构建工具为它创建一个包，虽然我在某个时候成功捆绑了应用程序仍然无法使 Express Rest API 脚本成为捆绑。由于我对 Webpack 并没有真正的经验，我很确定我做错了什么，必须有办法做到这一点。你也可以在下面看到我的 webpack.config.js、.babelrc 和 package.json：

webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var module_dir = `${__dirname}/node_modules`;
const path = require('path');

module.exports = {
  entry: {
    app: [
      'babel-polyfill',
      './index.js',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.bundle.js',
  },
  module: {
    rules: [{
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
           presets: ['env', 'stage-0']
        }
    }]
  },
  resolveLoader: {
    modules: [
          __dirname + …

我在本地使用 webpack-dev-server 来构建我的应用程序。我已正确配置它并在运行命令“yarn build”时将其生成文件放入 /dist/ 文件夹中。

有什么办法可以使用 webpack-dev-server 在本地使用 dist 文件夹吗？这个想法是我需要在本地运行我的应用程序的多个版本来测试一些东西。

我已经为我的应用程序配置了 WebPack 并添加了 webpack-dev-server。它在运行后成功编译并给我“项目正在http://localhost:9000/ 运行”。但是，当我尝试在浏览器中打开它时，出现“无法访问此站点”页面，并显示以下错误：

ERR_CONNECTION_REFUSED

任何修复建议将不胜感激！

我的 package.json 文件中的片段：

"scripts": {
    "build": "webpack --config webpack.config.js",
    "start:dev": "webpack-dev-server"

"devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1",

来自我的 webpack.config.js 文件的片段：

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }

在 iOS 12.2 中，Apple 默认阻止访问设备方向数据。这必须现在手动启用（-__-），如解释在这里。

问题是，即使在设置中启用“运动和方向访问”后，当我尝试在 deviceorientation 事件上设置侦听器时，我还是在 Safari 调试器上收到此警告消息：

function onDeviceOrientationChange (e) {
    console.log(e)
}

window.addEventListener("deviceorientation", onDeviceOrientationChange, false);

// ---> Blocked attempt to add a device motion or orientation listener because the browsing context is not secure.

我正在webpack dev server上开发。我怎样才能像以前一样摆脱这个块并访问设备方向数据？