gulp+webpack-dev-server 轻量伺服开发环境

1.在package.json中添加脚本或者命令行直接执行任务
2.新版本的gulp必须要从gulpfile.js或者gulpfile.js文件夹下面的index.js中导出任务，才能被gulp --task审查到

parallel为并发，series为顺序执行

const gulp = require('gulp');
const { runDev } = require('./dev');

exports.runDev = gulp.series(
  runDev
);

基本任务配置

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const WebpackDevServer = require('webpack-dev-server');
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");

async function runDev() {
  const mode = { mode: 'development' };
  const exclude = [
    /node_modules/
  ];
  // webpack配置
  const cfg = {
    //脚本入口
    entry: {
      index: path.join(__dirname, '../src/index.tsx'),
    },
     //脚本出口
    output: {
      path: path.join(__dirname, "../dist/"),
      filename: '[name].js'
    },
    resolve: {
      modules: [path.join(__dirname, "../src"), "node_modules"],
      extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".less"]
    },
    module: {
      rules: [{
        test: /(\.js)|(\.ts)|(\.tsx)$/,
        exclude,
        loader: "ts-loader",
        options: {
          transpileOnly: true
        }
      },
      {
        test: /\.css$/,
        exclude,
        use: ["style-loader", "css-loader", "postcss-loader"]
      },
      ]
    },
     // 至关重要
    plugins: [
      new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        chunks: ["index"],
        template: path.join(__dirname, '../src/index.html'),
        filename: "index.html"
      }),
    ],
  };
  const webpackConfig = webpackMerge(cfg, mode);
  const compiler = webpack(webpackConfig);
  // dev server配置
  const defaultServer = {
    // 伺服的directory
    contentBase: path.join(__dirname, '../dist'),
    compress: true,
    open: true,
    // index：作为string来索引页面
    index: 'index.html',
  };
  console.log('Dev Server page is ' + path.join(__dirname, '../src/index.html'))

  const serverPort = 9998;
  new WebpackDevServer(compiler, defaultServer).listen(serverPort, 'localhost', () => {
    console.log('dev server listening on port' + serverPort);
  });
}

module.exports = {
  runDev
}

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。
注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件