1
webpackとwebpack-dev-serverを使用したビルドの違いは、後者がメモリから出力されて処理され、前者がディスクへの出力を生成してスピンアップしないそれを提供するためにエクスプレス。webpack-dev-serverをロードする際の問題
私の問題は、webpackを実行してからwebpack-dev-serverを実行するとうまく動作しますが、後者は変更が行われたときに出力に反映されませんメモリ内にあるものにちょうど影響を及ぼすことになっているので、期待しています）。しかし、ディスク上のビルドされたファイルを削除してwebpackと一緒にバンドルしないと、webpack-dev-serverを起動してAngularアプリケーションを読み込むことができません（ページは空白で、 "Can not GET /"）。
セミワーキングアプローチ
これは動作します（ただし、私は二度それをすべてを構築していますので、理想的ではありません）：
- 指定された出力とdevserverオプション付きの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のサーバー
を使用して
これがないと思えます。 webpack-dev-serverの全体のポイントはメモリから提供されるため、出力ファイルから読み込む必要はありません。次のようにすれば、動作しません。
- 以前に生成された出力フォルダを削除します。エラーで迎え
- 実行NPMコマンド「
npm run webpack-dev-server -- --config appConfigs/webpack.dev.js --open --progress --profile --inline」 - ブラウザがアップロードし、
を「/ GETできない」ここでコンテンツがに配置されている場所に関して出力-devのサーバーのWebPACKものです： プロジェクトは、出力がCから提供されていないのWebPACKから/ コンテンツから提供していますhttp://localhost:9000/ のWebPACKで実行されている：\
だから、XYZ \ distの、私はそれがアップロードしたときに、それがindex.htmlのを見つけるだろうと期待しますhttp://localhost:9000であるが、I代わりに "Can not GET /"を取得してください。
今度は、ファイルが書き込まれていないため、HtmlWebpackPluginのようなプラグインを使用して、Webpackが正しく作成され、利用可能であることを確認する必要がありましたが、問題は解決していません。
webpack.dev.config内容
はここに私のwebpack.dev.configです（このファイルは、私はWebPACKので正常にバンドルする場合は正常に動作し、私はWebPACKのでバンドルあれば細かい機能ことに注意し、その後、WebPACKの-DEV-実行サーバ）。
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のサーバーから簡潔
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.
ため
リミテッドだから、それが動作するように見えますが、私は「取得することはできません取得して何にナビゲートすることができません{私が行ったことは何でも} "
一方、私はセミワーキングのアプローチを実行できますが、webpack経由でバンドルしてディレクトリに出力し、webpack-dev-servを起動しますそのディレクトリ内のファイルからは、実行しなければならないようなものではありません（これは2回バンドルされるため、2倍の時間がかかります）。
私には何が欠けていますか？