让 webpack-dev-server 加载的问题

Posted 2023-02-16

【中文标题】让 webpack-dev-server 加载的问题

【英文标题】：Issue getting webpack-dev-server to load

【发布时间】：2018-01-20 05:35:46

【问题描述】：

我知道使用 webpack 和 webpack-dev-server 构建的区别在于后者从内存中输出和提供服务，而前者将输出创建到磁盘并且不会启动 Express 来提供服务。

我的问题是，如果我通过 webpack 运行我的 webpack 配置，然后运行 ​​webpack-dev-server，那么我的 webpack 配置可以正常工作，但是在后者观察它的情况下，当进行更改时，它们不会反映在输出中（如预期的那样因为它应该只影响内存中的内容）。但是，如果我删除磁盘上的构建文件并且不首先与 webpack 捆绑，我无法让 webpack-dev-server 加载 Angular 应用程序（页面为空白并显示“Cannot GET /”）。

半工作方法

这可行（但并不理想，因为我要构建它两次）：

使用指定的输出和开发服务器选项创建一个 webpack 配置。 运行 npm 命令“npm run webpack -- --config appConfigs/webpack.dev.js --progress --profile && npm run webpack-dev-server -- --config appConfigs/webpack.dev.js --open --progress --profile --inline” 它构建到输出目录，然后 webpack-dev-server 启动这些文件并顺利运行。

仅使用 webpack-dev-server

这似乎不对。 webpack-dev-server 的全部意义在于从内存中提供服务，因此它根本不需要从输出文件中读取。如果我执行以下操作，则它不起作用：

删除之前生成的输出文件夹。 运行 npm 命令“npm run webpack-dev-server -- --config appConfigs/webpack.dev.js --open --progress --profile --inline” 当浏览器加载时，出现错误“Cannot GET /”

以下是 webpack-dev-server 关于内容所在位置的输出： 项目在http://localhost:9000/ 运行 webpack 输出来自 / 不是来自 webpack 的内容由 C:\xyz\dist

提供

所以，我希望当它加载时，它会在http://localhost:9000 找到 index.html，但我却得到“Cannot GET /”。

现在，另一个 SO 帖子指出，由于没有写入文件，我需要使用像 HtmlWebpackPlugin 这样的插件来确保它被正确创建并可供 webpack 使用，但这似乎并没有解决问题。

webpack.dev.config 内容

这是我的 webpack.dev.config（请注意，如果我与 webpack 正常捆绑，这个文件可以正常工作，如果我与 webpack 捆绑，然后运行 ​​webpack-dev-server，则可以正常工作）。

const webpack = require('webpack');
const helpers = require('./helpers');

const DefinePlugin = require('webpack/lib/DefinePlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');

/**
 * Webpack constants
*/
const ENV = process.env.ENV = process.env.NODE_END = 'development';
const HOST = 'localhost';
const PORT = 3000;
const PUBLIC = process.env.PUBLIC || undefined;
const HMR = helpers.hasProcessFlag('hot');
const METADATA = 
    host: HOST,
    port: PORT,
    public: PUBLIC,
    ENV: ENV,
    HMR: HMR
;

module.exports = 
    devtool: 'cheap-module-source-map',

    performance: 
        hints: false
    ,

    entry: 
        'polyfills': helpers.root('src', 'polyfills.browser.ts'),
        'app': helpers.root('src', 'main.browser.ts')
    ,

    output: 
        path: helpers.root('dist'),
        filename: 'js/[name].bundle.js',
        chunkFilename: 'js/[id].chunk.js',
        sourceMapFilename: '[file].map',
        publicPath: '/'
    ,

    devServer: 
        historyApiFallback: true,
        contentBase: helpers.root('dist'),
        port: 9000
    ,

    resolve: 
        extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
    ,

    module: 
        rules: [
            
                test: /\.ts$/,
                use: [
                        
                            loader: 'awesome-typescript-loader',
                            options: 
                                configFileName: 'tsconfig.webpack.json'
                            
                        ,
                        'angular-router-loader',
                        'angular2-template-loader',
                        
                            loader: 'tslint-loader',
                            options: 
                                conigFile: 'tslint.json'
                            
                        ,
                        'source-map-loader'
                ],
                exclude: [/\.(spec|e2e)\.ts$/]
            ,
            
                test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
                loader: 'file-loader?name=assets/[name]-[hash:6].[ext]'
            ,
            
                test: /\.json$/,
                loader: 'json-loader'
            ,
            
                test: /favicon.ico$/,
                loader: 'file-loader?name=/[name].[ext]'
            ,
            
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            ,
            
                test: /\.html$/,
                loader: ['html-loader'],
            
        ],
        exprContextCritical: false
    ,
    plugins: [
        new DefinePlugin(
            'ENV': JSON.stringify(METADATA.ENV),
            'HMR': METADATA.HMR, //unused here
            'process.env': 
                'ENV': JSON.stringify(METADATA.ENV),
                'NODE_ENV': JSON.stringify(METADATA.ENV),
                'HMR': METADATA.HMR //unused here
            
        ),
        new LoaderOptionsPlugin(
            debug: true,
            options: 
            
        ),
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('src'),
            
        ),
        new webpack.optimize.CommonsChunkPlugin(
            name: ['app', 'polyfills'],
            minChunks: Infinity
        ),
        new HtmlWebpackPlugin(
            inject: 'body',
            template: './src/index.html'
        )
    ]
;

（部分）来自 webpack-dev-server 的输出

限于篇幅

10% building modules 2/2 modules 0 active
Project is running at http://localhost:9000/
webpack output is served from /
Content not from webpack is served from C:\xyz\dist
404s will fallback to /index.html
...
Hash: 8ccd65a6efa15f3c1590
Version: webpack 3.5.1
Time: 29663ms
                     Asset     Size  Chunks                    Chunk Names
          js/app.bundle.js   4.6 MB       0  [emitted]  [big]  app
    js/polyfills.bundle.js   577 kB       1  [emitted]  [big]  polyfills
      js/app.bundle.js.map  4.97 MB       0  [emitted]         app
js/polyfills.bundle.js.map   691 kB       1  [emitted]         polyfills
                index.html  1.14 kB          [emitted]
 [560] (webpack)-dev-server/client?http://localhost:9000 5.83 kB 1 [built]
       [] -> factory:77ms building:65ms = 142ms
 [747] multi (webpack)-dev-server/client?http://localhost:9000 ./src/polyfills.browser.ts 40 bytes 1 [built]
        factory:0ms building:3ms = 3ms
 [756] ./node_modules/loglevel/lib/loglevel.js 6.74 kB 1 [built]
       [] -> factory:6700ms building:254ms = 6954ms
 [757] (webpack)-dev-server/client/socket.js 856 bytes 1 [built]
       [] -> factory:34ms building:757ms = 791ms
 [789] (webpack)-dev-server/client/overlay.js 3.6 kB 1 [built]
       [] -> factory:36ms building:743ms = 779ms
 [794] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes 1 [built]
       [] -> factory:31ms building:14ms = 45ms
 [796] (webpack)/hot/emitter.js 77 bytes 1 [built]
       [] -> factory:6257ms building:24ms = 6281ms
 [798] ./src/polyfills.browser.ts 1.16 kB 1 [built]
       [] -> factory:188ms building:6063ms = 6251ms
 [799] ./node_modules/core-js/es6/regexp.js 346 bytes 1 [built]
       [] -> factory:551ms building:50ms = 601ms
 [806] ./node_modules/core-js/es6/map.js 208 bytes 1 [built]
       [] -> factory:552ms building:55ms dependencies:4419ms = 5026ms
 [812] ./node_modules/core-js/es6/set.js 208 bytes 1 [built]
       [] -> factory:552ms building:53ms dependencies:4416ms = 5021ms
 [813] ./node_modules/core-js/es6/weak-map.js 176 bytes 1 [built]
       [] -> factory:553ms building:56ms dependencies:4415ms = 5024ms
 [864] multi (webpack)-dev-server/client?http://localhost:9000 ./src/main.browser.ts 40 bytes 0 [built]
        factory:0ms building:2ms dependencies:78ms = 80ms
 [865] ./src/main.browser.ts 899 bytes 0 [built]
       [] -> factory:452ms building:5896ms = 6348ms
[1436] ./src/app/environment.ts 1.01 kB 0 [built]
       [] -> factory:61ms building:106ms = 167ms
    + 1422 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.18 kB 0 [built]
            factory:476ms building:5898ms = 6374ms
webpack: Compiled successfully.

所以，它看起来可行，但我无法导航到任何内容，因为“无法获取 whatever I tried to go”

与此同时，我可以运行半工作方法，但它会通过 webpack 捆绑它，输出到目录，然后从该目录中的文件启动 webpack-dev-server，这不是它似乎应该这样做（这需要两倍的时间，因为它捆绑了两次）。

我错过了什么？

【参考方案1】：

删除了 node_modules 并使用 yarn 重新安装了所有内容，它的工作方式与宣传的完全一样。不知道有什么不同，但这里没有进一步的问题。