问题让 webpack-dev-server 加载 [英] Issue getting webpack-dev-server to load
问题描述
我知道使用 webpack 和 webpack-dev-server 构建之间的区别在于后者从内存中输出和提供服务，而前者将输出创建到磁盘并且不会启动 Express 来提供服务.
我的问题是，如果我通过 webpack 运行它，然后运行 webpack-dev-server，我的 webpack 配置可以正常工作，但是当后者观察它时，进行更改时，它们不会反映在输出中(如预期的那样)因为它应该只影响内存中的内容).但是，如果我删除磁盘上的构建文件并且不先与 webpack 捆绑，则无法让 webpack-dev-server 加载 Angular 应用程序(页面为空白并显示无法获取/").
半工作方法
这行得通(但并不理想，因为我正在构建它两次):
- 使用指定的输出和开发服务器选项创建 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" - 当浏览器加载时，出现错误无法获取/"
以下是 webpack-dev-server 输出的内容所在位置:项目运行在 http://localhost:9000/webpack 输出来自/不是来自 webpack 的内容从 C:\xyz\dist
提供所以，我希望当它加载时，它会在 http://localhost:9000 找到 index.html，但我得到无法获取/".
现在，另一篇 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 常量*/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 Approach
This 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-server
This 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\dist
So, 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 Contents
Here'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-server
Limited for brevity
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.
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 加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
