在 webpack 中使用 Vuejs。

我安装了 vue 热重载：

"vue-hot-reload-api": "^2.0.6"

然后我启动 webpack 开发服务器，并且能够查看页面 sing http://localhsot:8080：

webpack-dev-server --inline --hot

问题：页面更改不会自动重新加载，我必须运行webpack命令才能查看更改。

wepack.config.js：

module.exports = {
  // This is the "main" file which should include all other modules
  entry: './app/main.js',
  // Where should the compiled file go?
  output: {
    // To the `dist` folder
    path: './dist',
    // With the filename `build.js` so it's dist/build.js
    filename: 'build.js'
  },
  module: {
    // Special compilation rules
    loaders: [
      {
        // Ask webpack to check: …

概述

我正在尝试使用 Babel 和 Webpack 构建 React 应用程序。我知道我可以使用create-react-app，但我想了解这些技术如何为我自己协同工作。

当我运行yarn run start或yarn run build（参见下面的package.json）时，Webpack 报告已构建好捆绑包。当我在浏览器中运行该应用程序时，出现错误Uncaught ReferenceError: React is not defined。

关于同样的错误，有很多问题，但没有一个解决方案可以解决我的问题。

问题

为了让 React、Babel 和 Webpack 很好地协同工作，我还缺少哪一部分？

代码

包.json

{\n  "private": true,\n  "scripts": {\n    "build": "webpack",\n    "start": "webpack-dev-server"\n  },\n  "dependencies": {\n    "react": "^15.4.1",\n    "react-dom": "^15.4.1",\n    "react-redux": "^5.0.1",\n    "redux": "^3.6.0"\n  },\n  "devDependencies": {\n    "babel-core": "^6.21.0",\n    "babel-loader": "^6.2.10",\n    "babel-preset-es2015": "^6.18.0",\n    "babel-preset-react": "^6.16.0",\n    "redux-devtools": "^3.3.1",\n    "webpack": …

在尝试从与插入的 Nodejs 模块不同的 Nodejs 模块中检索 redis 时，我收到“找不到模块的错误”：

ERROR in ./~/redis/index.js
Module not found: Error: Cannot resolve module 'net' in E:\Code-     
Asst\node_modules\redis
 @ ./~/redis/index.js 3:10-24

ERROR in ./~/redis/index.js
Module not found: Error: Cannot resolve module 'tls' in E:\Code-  
Asst\node_modules\redis
@ ./~/redis/index.js 4:10-24

ERROR in ./~/redis/index.js
Module not found: Error: Cannot resolve module 'net' in E:\Code-  
Asst\node_modules\redis
@ ./~/redis/index.js 3:10-24

ERROR in ./~/redis/index.js
Module not found: Error: Cannot resolve module 'tls' in E:\Code-  
Asst\node_modules\redis
 @ ./~/redis/index.js 4:10-24

ERROR in ./~/redis-parser/lib/hiredis.js
Module not …

演示该问题的示例回购在这里。

我正在尝试设置 webpack 开发服务器，以便：

1. 请求/由public/landing.html（静态登录页面）提供服务
2. 对其他任何事物的请求由我的 React 应用程序提供

使用create-react-app, 并基于webpack-dev-server's options，我设置webpackDevServer.config.js如下：

historyApiFallback: { // Paths with dots should still use the history fallback. // See https://github.com/facebookincubator/create-react-app/issues/387. disableDotRule: true, rewrites: [ // shows views/landing.html as the landing page { from: /^\/$/, to: 'landing.html' }, // shows views/subpage.html for all routes starting with /subpage { from: /^\/subpage/, to: 'subpage.html' }, // shows views/404.html on all other pages { from: /./, …

我有一个奇怪的问题，我想知道是否有人遇到过这种情况。我的应用程序中有 webpack 可以捆绑、提供服务以及介于两者之间的所有内容。我注意到，当我从我的 gulp 文件编译和运行 webpack-devserver 时，一切都按预期进行，在我的终端中，我得到以下信息：

webpack: Compiled successfully.

2017-11-30T11:46:05.288Z - error: 
[Browsersync] Proxying: http://localhost:3001
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3002
    External: http://10.101.51.117:3002
 --------------------------------------
          UI: http://localhost:3003
 UI External: http://10.101.51.117:3003
 --------------------------------------

现在，当我通过“本地主机”访问我的应用程序时，该页面的浏览器选项卡中没有显示收藏夹图标，控制台中没有 404，并且开发人员工具网络选项卡中没有对收藏夹图标的请求？现在我应该使用外部 URL 并在浏览器中输入http://10.101.51.117:3002 网站图标在页面选项卡中，但是开发人员工具网络选项卡中没有对网站图标的请求。

现在，当我在浏览器中直接调用 favicon 到http://localhost:3002/assets/favicon.ico 时，favicon 在浏览器窗口中提供，所以看起来服务器正在捆绑 Favicon？

在我的 HTML 中，我的标签<link rel="shortcut icon" href="assets/favicon.ico">没什么奇怪的，在我的webpack.common.js文件中，我有以下内容（为了简单起见，我在这里删除了一些项目）

module.exports = {
  // lots of things here..
  module: {
    rules: [
    // stuff here has been removed
      {
        test: /\.html$/,
        use: 'html-loader'
      }, …

我在 vue 组件中引用图像 url，例如

<img alt="Vue logo" src="~statics/reports/logo.png">

这有效

但在尝试的同时

<img alt="Vue logo" :src="getURL()">


data() {
    return { imgPath: "~statics/reports/logo.png" };
  },

  methods: {

    getURL() {
        // 

      // console.log(path)
      return (this.imgPath)
    }
  },

它失败

我的文件夹结构是

在第一种情况下，路径被解析为

http://localhost:8081/img/logo.82b9c7a5.png

并由开发服务器自动提供

在第二种情况下，路径未解析，它仍然存在 http://localhost:8081/~statics/reports/logo.png

我正在使用 vue cli 3 为 webpack 生成的默认配置。

我不想对像 ../images/ 这样的所有图像使用相对路径，因为它使它更加冗长。我试过 require(pathVariable) 也不起作用当 url 是动态的，即资产名称来自服务器时，请帮助解析 img 路径，我在方法或计算中附加路径并使用 :src 动态绑定来提供服务

我找不到任何好的知识来源。

从 webpack 2.7 迁移到版本 4 有多复杂？

如果我的构建时间现在需要 1 分 38 秒。版本 4 会提升它吗？

这样做有什么障碍吗？

有一个美好的星期五！

我刚刚在 Rails 5.2 应用程序上安装了 webpacker，在尝试运行时bin/webpack-dev-server出现以下错误：

 ? ?wds?: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   function | object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string]
   -> The entry point(s) of the compilation.
   Details:
    * configuration.entry should be an instance of function
      -> A Function returning an entry object, an entry string, an entry array …

我正在尝试重命名我localhost在开发中使用的名称。

我已经更新了我的C:\Windows\System32\drivers\etc\hosts文件并添加了这一行（以管理员身份运行）：

# copyright (c) 1993-2009 microsoft corp.
#
# this is a sample hosts file used by microsoft tcp/ip for windows.
#
# this file contains the mappings of ip addresses to host names. each
# entry should be kept on an individual line. the ip address should
# be placed in the first column followed by the corresponding host name.
# the ip address and the host name should be separated by at least …

我copy-webpack-plugin从升级4.6.0到6.0.2

我改变了我的代码

plugins: [
    new CopyWebpackPlugin([{
      from: clientAssetPath,
      to: paths.STATICS,
      ignore: [ '.gitkeep' ],
    }], {
      debug: 'info'
    }),
    new HtmlWebpackPlugin({
      ...htmlPluginOptions,
    }),
    new DynamicCDNWebpackPlugin({
      resolver: unpkgResolver,
    }),
  ]

到

plugins: [
    new CopyPlugin([{
      patterns: [{
        from: clientAssetPath,
        to: paths.STATICS,
        noErrorOnMissing: true
      }]
    }]),
    new HtmlWebpackPlugin({
      ...htmlPluginOptions,
    }),
    new DynamicCDNWebpackPlugin({
      resolver: unpkgResolver,
    }),
  ]

如官方网站所示

但它开始抛出以下错误： compilation.getLogger is not a function

当我调试它时，我发现错误来自 node_modules/copy-webpack-plugin/dist/index.js 不知道是什么问题