3.2vwe开发之webpack整合express之辅助工具

vwe中webpack辅助工具

在webpack开发中，为了提高我们的效率，常常需要一些辅助的工具

1. Webpack Dev Middleware- webpack开发辅助工具
2. Hot Module Reloading- webpack热加载工具

添加Webpack Dev Middleware

在开发过程中，我们不停的运行如下命令

npm run buildDev
npm run start

头都快爆炸了，不过有个方法可以让我们解决这个问题，它就是Webpack Dev Middleware

Webpack Dev Middleware(WDM)会监听source文件，当你重新保存文件时，它会重新运行，所有的改变
都会被保存到内存中，不会生成文件到硬盘中。Hot Module Reload建立在Webpack Dev MiddleWare
上，所以我们先阐述WDM。首先我们安装依赖：

npm install --save-dev webpack-dev-middleware

1. 由于此时WDM在webpack4中仍然需要在webpack.dev.config.js中导出一个对象，因此
   我们不能对外出一个使用argv.mode去设置开发环境的函数，相反的，我们需要写死它在代码中。

更新webpack.dev.config.js代码如下：

const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  //写死在配置代码中
  mode: 'development',
  target: 'web',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        // Loads the javacript into html template provided.
        // Entry point is set below in HtmlWebPackPlugin in Plugins
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            //options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
       test: /\.(png|svg|jpg|gif)$/,
       use: ['file-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/html/index.html",
      filename: "./index.html",
      excludeChunks: [ 'server' ]
    }),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}

2. 我们需要在服务器中添加WDM，修改./src/server/server-dev.js代码如下：

import path from 'path'
import express from 'express'
import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import config from '../../webpack.dev.config.js'
const app = express(),
            DIST_DIR = __dirname,
            HTML_FILE = path.join(DIST_DIR, 'index.html'),
            compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}))
app.get('*', (req, res, next) => {
  compiler.outputFileSystem.readFile(HTML_FILE, (err, result) => {
  if (err) {
    return next(err)
  }
  res.set('content-type', 'text/html')
  res.send(result)
  res.end()
  })
})
const PORT = process.env.PORT || 8080
app.listen(PORT, () => {
    console.log(`App listening to ${PORT}....`)
    console.log('Press Ctrl+C to quit.')
})

编译启动后，然后修改logger.js或者index.html刷新就可以看到变化了。

添加Hot Module Reloading

在上面中，每次我们修改后，WDM会自动重新build并且保存到内存中，然后会刷新页面查看效果
，但是HMR（hot module reloading)可以让我们免去刷新就可以直接查看效果。

1. 安装依赖：

npm install --save-dev webpack-hot-middleware

2. 更新webpack.dev.config.js代码如下

const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './src/index.js']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  mode: 'development',
  target: 'web',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        // Loads the javacript into html template provided.
        // Entry point is set below in HtmlWebPackPlugin in Plugins
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            //options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
       test: /\.(png|svg|jpg|gif)$/,
       use: ['file-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/html/index.html",
      filename: "./index.html",
      excludeChunks: [ 'server' ]
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}

3. 更新./src/server/server-dev.js为：

import path from 'path'
import express from 'express'
import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import config from '../../webpack.dev.config.js'

const app = express(),
  DIST_DIR = __dirname,
  HTML_FILE = path.join(DIST_DIR, 'index.html'),
  compiler = webpack(config)
// 在express中使用插件WDM
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}))
//在express中使用HMR插件
app.use(webpackHotMiddleware(compiler))
app.get('*', (req, res, next) => {
  compiler.outputFileSystem.readFile(HTML_FILE, (err, result) => {
    if (err) {
      return next(err)
    }
    res.set('content-type', 'text/html')
    res.send(result)
    res.end()
  })
})
const PORT = process.env.PORT || 8080
app.listen(PORT, () => {
  console.log(`App listening to ${PORT}....`)
  console.log('Press Ctrl+C to quit.')
})

4. 启动

npm run buildDev;npm run start

然后你修改 JS, CSS, 或者 HTML 文件然后保存，页面就可以自动的看到变化了。

下一篇：4.vwe开发之代码检测