标签: webpack-dev-server

我目前正在开发一个使用不同前端主题的应用程序。这些主题只是用户可以选择的 CSS 文件。

从技术上讲，这些主题是 .scss 文件，它们由 webpack 编译并通过 angular 中的标准链接标签加载：

<link rel="stylesheet", ng-href="themes/{{theme}}.css">

我剥离的 webpack 配置如下所示：

theme1CssExtractor = new ExtractTextPlugin('themes/theme-1.css'),     
theme2CssExtractor = new ExtractTextPlugin('themes/theme-2.css'),     

module.exports = new WebpackConfig().merge({

entry: {
    app: [
        './app/main.ts',
        './assets/sass/themes/theme-1.scss',
        './assets/sass/themes/theme-2.scss'
    ],
},

output: {
    path: "build/",
    filename: "[name].bundle.js",
    publicPath: "/build/"
},

plugins: [
    theme1CssExtractor,
    theme2CssExtractor,
],

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader']
        },
        [
            {
                test: /theme-1\.scss$/,
                include: path.resolve(__dirname, "assets/sass/themes"),
                loader: theme1CssExtractor.extract(
                    "style",
                    "css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib')
                )
            },
            {
                test: /theme-2\.scss$/, …

我正在使用webpack-dev-server -d --inline通过webpack生成的dist/app.js文件.我已经激活了源映射,它在我的dist /文件夹中生成了一个app.js.map文件,同时//# sourceMappingURL=app.js.map在文件的末尾生成了一个app.js.map 文件,但Chrome devtools似乎没有使用源映射.

我想也许问题是Chrome无法看到原始源文件(因为只有dist /文件夹由webpack-dev-server提供),所以我尝试将服务文件映射到dev中的本地文件工具.

不幸的是,我得到了"工作区映射不匹配",我不确定为什么文件会有所不同,我也不确定即使文件匹配也会修复源映射问题.

我将不胜感激任何帮助.

我知道这是一种形成问题的可怕方式，但我已经为此研究了几个小时，但没有取得任何进展。昨晚一切正常，今天早上我从 App Store 收到更新，这让我重新启动，现在我的 npm 服务器（我正在尝试学习 React.js）无法正常工作。这是我的错误日志：

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using npm@4.0.5
3 info using node@v4.6.1
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle react-essential@1.0.0~prestart: react-essential@1.0.0
6 silly lifecycle react-essential@1.0.0~prestart: no script for prestart, continuing
7 info lifecycle react-essential@1.0.0~start: react-essential@1.0.0
8 verbose lifecycle react-essential@1.0.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle react-essential@1.0.0~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/FrankHarvey/Dropbox/react-practice/node_modules/.bin:/Users/FrankHarvey/anaconda2/bin:/Library/Frameworks/Python.framework/Versions/3.5/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin
10 verbose lifecycle react-essential@1.0.0~start: CWD: /Users/FrankHarvey/Dropbox/react-practice
11 …

我想通过使用下面给我的这行代码从我的 webpack 文件中排除它。

noParse: /node_modules\/localforage\/dist\/localforage.js/,

但是无论我尝试什么，我都会不断说错误，例如

ReferenceError：C:/..../node_modules\localforage\.babelrc 中指定的未知插件“add-module-exports”

这是我的 webpack 配置文件：

var path = require('path');
 var HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: './app/index.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'index_bundle.js',
     publicPath: '/'
   },
   devServer: {
    historyApiFallback: true,
  },
   module: {
     rules: [
       { test: /\.(js)$/, use: 'babel-loader' },

       { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
       template: 'app/index.html'
     })
  ]
};

我正在尝试使用动态查询参数代理我的请求，但似乎收到 404 错误或根本没有响应。这是我迄今为止尝试过的：

'/services/app/details.json?id=*': {
    target: 'https://website.com/api/v1/potato/',
    changeOrigin: true,
    secure: true,
    pathRewrite: {
      '^/services/app/details.json?id=': '',
    },
}

我期待来自我的本地机器 ( /services/app/details.json?id=2189)的请求代理到https://website.com/api/v1/potato/2189但似乎id没有附加到目标请求并导致 404 错误。

我尝试使用该bypass方法自己附加 id，而没有给我任何响应对象。

'/services/app/details.json?id=*': {
    target: 'https://website.com/api/v1/potato/',
    changeOrigin: true,
    secure: true,
    pathRewrite: {
      '^/services/app/details.json?id=': '',
    },
    bypass(req, res, proxyOptions) {
      const id = (req.query.id ? req.query.id : '');

      const API = Object.assign({}, proxyOptions, {
        target: proxyOptions.target + id,
      });

      return API.target;
    },
}

有任何人对此有经验吗？

我在开发模式（观察）下使用 webpack-dev-server。每次服务器重新加载时，一些 json 和 js 文件都会挤满我的构建目录，如下所示：

'hash'.hot-update.json

{"h":"05e9f5d70580e65ef69b","c":{"main":true}}

'hash'.hot-update.js

webpackHotUpdate("main",{

/***/ "./client/components/forms/SignIn.js":
/*!*******************************************!*\
  !*** ./client/components/forms/SignIn.js ***!
  \*******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n\tvalue: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, …

我在 React 项目上使用 Webpack，它似乎以一种我不理解的奇怪方式HtmlWebpackPlugin影响了webpack 开发服务器。

它似乎允许我浏览到index.html该文件在代码库中的任何位置，这是单独使用开发服务器无法实现的。

假设我有以下目录结构：

myproj/
  |- package.json
  |- webpack.config.js
  |- src/
    |- index.html
    |- index.jsx

和一个webpack.config.js看起来像这样的文件：

const path = require('path');

module.exports = {
    entry: './src/index.jsx',
   
    devServer: {
        contentBase: __dirname
    }
};

然后我跑webpack-dev-server --mode=development。由于我已devServer.contentBase设置为当前目录 ( myproj) 并且index.html文件在里面myproj/src，因此我必须浏览http://localhost:8080/src/index.html以查看我的 Web 应用程序。如果我尝试浏览，http://localhost:8080/index.html则会得到 404。这对我来说很有意义。

然后我添加了HtmlWebpackPlugin，里面没有改变任何东西webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
....
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }) …

我希望webpack开发服务器在所有没有资源请求的资源请求后面附加一个斜杠。

例如：
我的索引位于，/my/project/root/index.html
我可以通过Webpack开发服务器在
1. /my/project/root和
2 处访问它。/my/project/root/（请注意此处的斜杠）

我希望将请求1重定向到2。

我已经尝试过使用historyAPIFallback选项，但是您可以提供给该选项的重写仅通过请求，它们不会更改URL。

是否可以使用webpack开发服务器重定向请求？

我正在为反应启动器构建一个工作流程,并希望在我对scss文件进行更改时自动重新加载浏览器.

目前,当我在index.js文件中进行更改(设置为我的入口点)时,webpack将热重新加载.但是当我在我的scss文件中更改/添加scss代码时,它会被编译,但是css不会在任何地方输出,也不会触发浏览器重新加载.

我是webpack的新手,非常感谢这里的一些见解.

这是我的webpack.config.js

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

module.exports = {
    entry: ['./src/js/index.js', './src/scss/style.scss'],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/index_bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].css',
                            outputPath: 'css/'
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    }, …

我有一个nodejs/express + React CRA应用程序,我正在尝试从nodejs设置一个cookie.服务器在端口4001上,所以在我的React应用程序的project.json中我"proxy": "http://localhost:4001"设置了,但cookie仍然不会在浏览器中设置.

我也在生产模式下对它进行了测试,React应用程序直接从nodejs提供,一切正常.

以下是我设置cookie的方法.我在这里尝试了几种不同的选项组合,它们都有相同的结果.

res.cookie('jwt', token, {
    httpOnly: false,
    sameSite: false,
    signed: false,
    secure: false,
    encode: String
});
res.header('Access-Control-Allow-Credentials', 'true');

编辑:在客户端,我使用Axios来处理我的ajax请求.

编辑:

这是登录的端点函数(POST/api/users/login):

login: function(req, res) {
    User.findOne({
        $or: [{email: req.body.username}, {username: req.body.username}]
    }).exec().then(user => {
        if(user) {
            if(user.checkPassword(req.body.password)) {
                jwt.sign({ userID: user._id }, 'secret', (err, token) => {
                    res.cookie('jwt', token, {
                        httpOnly: false,
                        sameSite: false,
                        signed: false,
                        secure: false,
                        encode: String
                    });
                    res.header('Access-Control-Allow-Credentials', 'true');
                    res.status(200).send({ status: 'ok', message: 'Success'});
                });
            }
            else {
                return …