问题让 webpack-dev-server 加载

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 常量*/const ENV = process.env.ENV = process.env.NODE_END = '开发';const 主机 = '本地主机';常量端口 = 3000;const PUBLIC = process.env.PUBLIC ||不明确的;const HMR = helpers.hasProcessFlag('hot');常量元数据 = {主持人:主持人，港口:港口，公共:公共，环境:环境，HMR:HMR};模块.出口 = {开发工具:'便宜的模块-源图'，表现: {提示:假},入口: {'polyfills': helpers.root('src', 'polyfills.browser.ts'),'app': helpers.root('src', 'main.browser.ts')},输出: {路径:helpers.root('dist'),文件名:'js/[名称].bundle.js'，chunkFilename: 'js/[id].chunk.js',sourceMapFilename: '[file].map',公共路径:'/'},开发服务器:{historyApiFallback: 真,contentBase: helpers.root('dist'),端口:9000},解决: {扩展名:['.ts', '.js', '.json', '.css', '.scss', '.html']},模块: {规则: [{测试:/\.ts$/,用: [{loader: 'awesome-typescript-loader',选项: {configFileName: 'tsconfig.webpack.json'}},'角度路由器加载器'，'angular2-template-loader',{loader: 'tslint-loader',选项: {配置文件:'tslint.json'}},'源映射加载器'],排除:[/\.(spec|e2e)\.ts$/]},{测试:/\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,loader: 'file-loader?name=assets/[name]-[hash:6].[ext]'},{测试:/\.json$/,装载机:'json-装载机'},{测试:/favicon.ico$/，loader: 'file-loader?name=/[name].[ext]'},{测试:/\.scss$/,加载器:["style-loader", "css-loader", "sass-loader"]},{测试:/\.html$/,loader: ['html-loader'],}],exprContextCritical: 假},插件: [新定义插件({'ENV': JSON.stringify(METADATA.ENV),'HMR': METADATA.HMR,//此处未使用'process.env':{'ENV': JSON.stringify(METADATA.ENV),'NODE_ENV': JSON.stringify(METADATA.ENV),'HMR': METADATA.HMR//此处未使用}}),新的 LoaderOptionsPlugin({调试:真的，选项: {}}),新的 webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,helpers.root('src'),{}),新的 webpack.optimize.CommonsChunkPlugin({名称:['应用程序'，'polyfills']，minChunks:无穷大}),新的 HtmlWebpackPlugin({注入:'身体'，模板:'./src/index.html'})]};(部分)来自 webpack-dev-server 的输出限于篇幅10% 构建模块 2/2 模块 0 活动项目运行在 http://localhost:9000/webpack 输出来自/不是来自 webpack 的内容从 C:\xyz\dist 提供404s 将回退到/index.html...哈希:8ccd65a6efa15f3c1590版本:webpack 3.5.1时间:29663ms资产大小块块名称js/app.bundle.js 4.6 MB 0 [已发出] [大] 应用js/polyfills.bundle.js 577 kB 1 [emitted] [big] polyfillsjs/app.bundle.js.map 4.97 MB 0 [发出] 应用程序js/polyfills.bundle.js.map 691 kB 1 [emitted] polyfillsindex.html 1.14 kB [发出][560] (webpack)-dev-server/client?http://localhost:9000 5.83 kB {1} [内置][] ->工厂:77ms 建筑:65ms = 142ms[747] multi (webpack)-dev-server/client?http://localhost:9000 ./src/polyfills.browser.ts 40 字节 {1} [内置]工厂:0ms 建筑:3ms = 3ms[756] ./node_modules/loglevel/lib/loglevel.js 6.74 kB {1} [内置][] ->工厂:6700ms 建筑:254ms = 6954ms[757] (webpack)-dev-server/client/socket.js 856 字节 {1} [内置][] ->工厂:34ms 建筑:757ms = 791ms[789] (webpack)-dev-server/client/overlay.js 3.6 kB {1} [内置][] ->工厂:36ms 建筑:743ms = 779ms[794] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {1} [built][] ->工厂:31ms 建筑:14ms = 45ms[796] (webpack)/hot/emitter.js 77 字节 {1} [内置][] ->工厂:6257ms 建筑:24ms = 6281ms[798] ./src/polyfills.browser.ts 1.16 kB {1} [内置][] ->工厂:188ms 建筑:6063ms = 6251ms[799] ./node_modules/core-js/es6/regexp.js 346 字节 {1} [内置][] ->工厂:551ms 建筑:50ms = 601ms[806] ./node_modules/core-js/es6/map.js 208 字节 {1} [内置][] ->工厂:552ms 建筑:55ms 依赖:4419ms = 5026ms[812] ./node_modules/core-js/es6/set.js 208 字节 {1} [内置][] ->工厂:552ms 建筑:53ms 依赖:4416ms = 5021ms[813] ./node_modules/core-js/es6/weak-map.js 176 字节 {1} [内置][] ->工厂:553ms 建筑:56ms 依赖:4415ms = 5024ms[864] multi (webpack)-dev-server/client?http://localhost:9000 ./src/main.browser.ts 40 字节 {0} [内置]工厂:0ms 建筑:2ms 依赖:78ms = 80ms[865] ./src/main.browser.ts 899 字节 {0} [内置][] ->工厂:452ms 建筑:5896ms = 6348ms[1436] ./src/app/environment.ts 1.01 kB {0} [内置][] ->工厂:61ms 建筑:106ms = 167ms+ 1422 个隐藏模块index.html"的子 html-webpack-plugin:1 项资产[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.18 kB {0} [内置]工厂:476ms 建筑:5898ms = 6374mswebpack: 编译成功.所以，看起来它有效，但我无法通过获取无法获取{无论我尝试去什么}"来导航到任何内容与此同时，我可以运行半工作方法，但它会通过 webpack 将其捆绑，输出到目录，然后从该目录中的文件启动 webpack-dev-server，这不是它似乎应该这样做(这需要两倍的时间，因为它捆绑了两次).我错过了什么? 解决方案 删除了 node_modules 并使用 yarn 重新安装了所有内容，它的工作方式与宣传的完全一样.不确定有什么不同，但这里没有进一步的问题.I understand that the difference between building with webpack and webpack-dev-server is that the latter outputs and serves from memory and the former creates the output to disk and doesn't spin up Express to serve it.My issue is that my webpack config works fine if I run it through webpack, then run webpack-dev-server, but with the latter watching it, when changes are made, they're not reflected in the output (as expected since it's supposed to just impact what's in memory). However, if I delete the built files on disk and don't bundle with webpack first, I cannot get webpack-dev-server to load the Angular app (page is blank and says "Cannot GET /").Semi-Working ApproachThis works (but isn't ideal because I'm building it all twice):Create a webpack config with the output and devserver options specified.Run the npm command "npm run webpack -- --config appConfigs/webpack.dev.js --progress --profile && npm run webpack-dev-server -- --config appConfigs/webpack.dev.js --open --progress --profile --inline"It builds to the output directory, then webpack-dev-server launches those files and it runs without a hitch.Using only webpack-dev-serverThis doesn't seem right. The whole point of webpack-dev-server is to serve from memory, so it shouldn't need to read from the output file at all. If I do the following, it doesn't work though:Delete the previously generated output folder.Run the npm command "npm run webpack-dev-server -- --config appConfigs/webpack.dev.js --open --progress --profile --inline"When the browser loads up, greeted with error "Cannot GET /"Here's what webpack-dev-server outputs with regards to where content is located at:Project is running at http://localhost:9000/webpack output is served from /Content not from webpack is served from C:\xyz\distSo, I would expect that when it loads up, it'd find the index.html at http://localhost:9000, but I get "Cannot GET /" instead.Now, another SO post indicated that because no files are written, I needed to use a plugin like HtmlWebpackPlugin to ensure that it was properly created and available to webpack, but that doesn't appear to have resolved the issue.webpack.dev.config ContentsHere's my webpack.dev.config (note that this file works fine if I bundle normally with webpack, and serves fine if I bundle with webpack, then run 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' }) ]};(Partial) Output from webpack-dev-serverLimited for brevity10% building modules 2/2 modules 0 activeProject is running at http://localhost:9000/webpack output is served from /Content not from webpack is served from C:\xyz\dist404s will fallback to /index.html...Hash: 8ccd65a6efa15f3c1590Version: webpack 3.5.1Time: 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] appjs/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 modulesChild 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 = 6374mswebpack: Compiled successfully.So, it looks like it works, but I cannot navigate to anything with getting "Cannot GET {whatever I tried to go to}"In the meantime, I can run the semi-working approach, but it'll bundle it via webpack, output to the directory, then launch the webpack-dev-server from files in that directory, which isn't what it seems like it should be doing (this takes twice as long because it bundles twice).What am I missing? 解决方案 Deleted node_modules and reinstalled everything using yarn and it's working exactly as advertised. Not sure what's different, but no further issue here. 这篇关于问题让 webpack-dev-server 加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！