express でプロジェクトをつくる。

express express-webpack
cd express-webpack
npm install

webpackwebpack-cli をインストール

npm install -D webpack webpack-cli

とりあえず webpack を実行してみる。

npx webpack ./bin/www
Hash: 38f994feead1d372bfc5
Version: webpack 4.26.1
Time: 380ms
Built at: 2018-12-02 18:32:11
 1 asset
Entrypoint main = main.js
[0] ./bin/www 167 bytes {0} [built] [failed] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./bin/www 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #!/usr/bin/env node
|
| /**

当然のごとくエラー

ちょっと調べた。

WebPackでnodeランタイム向けにビルドする

webpack-node-externals をインストールして、設定ファイルを書けばいけるみたい

webpack-node-externals をインストール

npm install -D webpack-node-externals

設定ファイル webpack.config.js を express-webpack の直下に作成

webpack.config.js

const nodeExternals = require('webpack-node-externals');
const path = require('path');

module.exports = {
  target: 'node', // in order to ignore built-in modules like path, fs, etc.
  externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
  entry: {
    app: "./bin/www"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "app.js"
  }
}

ついでに package.json に buildコマンドを追加

{
  "name": "express-webpack",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "build": "webpack ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0"
  },
  "devDependencies": {
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "webpack-node-externals": "^1.7.2"
  }
}

ビルドしてみる

npm run build
> express-webpack@0.0.0 build E:\00_Development\src\NodeJS\express-webpack
> webpack ./bin/www

Hash: d917c20dc22426550ea4
Version: webpack 4.26.1
Time: 298ms
Built at: 2018-12-02 18:47:17
 1 asset
Entrypoint main = app.js
[0] ./bin/www 167 bytes {0} [built] [failed] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./bin/www 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #!/usr/bin/env node
|
| /**

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files (x86)\\Nodist\\v-x64\\10.13.0\\node.exe" "C:\\Program Files (x86)\\Nodist\\npmv\\4.0.5\\bin\\npm-cli.js" "run" "build"
npm ERR! node v10.13.0
npm ERR! npm  v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! express-webpack@0.0.0 build: `webpack ./bin/www`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the express-webpack@0.0.0 build script 'webpack ./bin/www'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the express-webpack package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack ./bin/www
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs express-webpack
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls express-webpack
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     E:\00_Development\src\NodeJS\express-webpack\npm-debug.log

シェバンが怒られてる。(シェバンってなに?)

bin/www から #!/usr/bin/env node を消して再実行

npm run build
> express-webpack@0.0.0 build E:\00_Development\src\NodeJS\express-webpack
> webpack ./bin/www

Hash: a703c292ef5b3909a215
Version: webpack 4.26.1
Time: 354ms
Built at: 2018-12-02 18:59:51
 Asset      Size  Chunks             Chunk Names
app.js  2.53 KiB       0  [emitted]  main
Entrypoint main = app.js
 [0] external "express" 42 bytes {0} [built]
 [1] ./bin/www 1.54 KiB {0} [built]
 [2] ./app.js 1.05 KiB {0} [built]
 [3] external "http-errors" 42 bytes {0} [built]
 [4] external "path" 42 bytes {0} [built]
 [5] external "cookie-parser" 42 bytes {0} [built]
 [6] external "morgan" 42 bytes {0} [built]
 [7] ./routes/index.js 205 bytes {0} [built]
 [8] ./routes/users.js 203 bytes {0} [built]
 [9] external "debug" 42 bytes {0} [built]
[10] external "http" 42 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

成功したかな? 実行して確認してみる。

node ./dist/app.js

ブラウザで http://localhost:3000 にアクセス

失敗。。。

良さそうな記事があったからこっち読んでやってみる。

Creating a Node Express-Webpack App with Dev and Prod Builds