Node+webpack(二)webpack-dev-server

npm i webpack-dev-server
1.packageを修正する.json
新規作成
"dev": "webpack-dev-server --config webpack.config.js"

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
  },

 
2.環境変数の設定
npm i cross-env不通プラットフォームは統一スクリプトを実行し、環境変数を設定する
パッケージを変更します.jsonのbuildとdev
次のように変更

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },

3.webpackを修正する.config.js
   3.1
追加target:'web',

module.exports={
    target:'web',
    entry: path.join(__dirname,'src/index.js'),
    。。。。。。。

  3.2
新規const isDev=process.env.NODE_DEV === 'development'
  3.3
module.exportsをconfigに変更
新しいmodule.exports=config
 3.4 
新規作成

if(isDev){
 config.devServer = {
   port: 8000,
   host: '0.0.0.0',
   overlay: {
     error:true,
   }
 }
}

4.html-webpack-pluginのインストール
   4.1 npm i html-webpack-plugin
4.2 webpack.config.js加入
 

const HTMLPlugin = require('html-webpack-plugin')

   4.3 webpack.config.jsをに変更

plugins:[
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
          'process.env' : {
            NODE_ENV : isDev ? '"development"' : '"production"'
          }
        }),
        new HTMLPlugin()
    ]

      4.4

const webpack = require('webpack')

5.起動
npm run dev
アクセスhttp://localhost:8080/
 
ホットロード機能
1.webpackを修正する.config.js

if(isDev){
  config.devServer = {
    port: 8000,
    host: '0.0.0.0',
    overlay: {
      error:true,
    }
  }
 }

hot:trueおよびconfigを加える.plugins.push
configに参加する.devtool
変更後

if(isDev){
  config.devtool = '#cheap-module-eval-source-map'
  config.devServer = {
    port: 8000,
    host: '0.0.0.0',
    overlay: {
      error:true,
    },
    // open:true,
    hot:true
  }
    config.plugins.push(
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    )
 }