easy-team / webpack-tool Goto Github PK

View Code? Open in Web Editor NEW

12.0 3.0 11.0 705 KB

Webpack Build Tool, Support Webpack Build Ui View.

Home Page: https://easyjs.cn

License: MIT License

JavaScript 100.00%

webpack webpack4 webpack3 webpack-dev-server webpack-hot-middleware

webpack-tool's Introduction

webpack-tool

Koa Webpack Dev Server:

development mode, start webpack koa server, file memory, hot update.
production mode, webpack build file to disk.

Version

webpack 5: webpack-tool: 5.x.x
webpack 4: webpack-tool: 4.x.x
webpack 3: webpack-tool: 3.x.x

Install

$ npm i webpack-tool --save

Usage

//build/index.js
const WebpackTool = require('webpack-tool');
const NODE_ENV = process.env.VIEW;

const webpackTool = new WebpackTool({
  devServer: {
    before: before => {
      // register koa middleware
    },
    after: app => {
      // register koa middleware
    },
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    },
    historyApiFallback: {
      index: '/app.html'
    }
  }
});

const webpackConfig = {
  entry:{
    index: './src/index.js'
  },
  module:{
    rules:[]
  }
  plugins: []
};

if (NODE_ENV === 'development') {
  // start webpack build and show build result ui view
  webpackTool.server(webpackConfig);
} else {
  // if you want to show build result ui view for build mode, please set  process.env.BUILD_VIEW=true
  webpackTool.build(webpackConfig);
}

Configuration

config.devServer support follow option:

proxy {Object} see https://webpack.docschina.org/configuration/dev-server/#devserver-proxy
historyApiFallback {Object} see https://webpack.docschina.org/configuration/dev-server/#devserver-historyapifallback
before {Function} see https://webpack.docschina.org/configuration/dev-server/#devserver-before
after {Function} see https://webpack.docschina.org/configuration/dev-server/#devserver-after

Run

"scripts": {
  "start": "cross-env node build"
 }

npm start

Start Webpack Debug Server: http://127.0.0.1:8888/debug

webpack-tool's People

Contributors

Stargazers

Watchers

Forkers

derickwarshaw muzi131313 toc-team kaola-fed zgl520 halu886 eon-lee96 zy-cheng jindwer wanyi3605 rorivers

webpack-tool's Issues

怎么设置自定义headers

在 webpack 5 出来前更新下 webpack 4 版本？

项目 package.json 中 webpack 版本为 4.42.1。
但是 webpack-tool 的 package.json 中 webpack 版本设定为 4.28.4。
然后使用 HotModuleReplacementPlugin 时，保存代码触发再次构建，会出现以下报错：

nodejs.TypeError: compilation.getPathWithInfo is not a function

希望能升级下 webpack 4 版本，谢谢。

devServer中historyApiFallback配置rewrites规则，相关依赖包报错

webpack-tool版本4.4.2

场景: 一个多入口的纯前端项目，需要针对入口配置对应的historyApiFallback规则

重现步骤和问题: devServer中historyApiFallback配置rewrites规则，访问对应rewrite规则命中的地址，脚本报错: 'req is not defined' , 对应报错的依赖包是koa-history-api-fallback, 报错位置line84:
logger('Rewriting', req.method, req.url, 'to', rewriteTarget);

koa-history-api-fallback的git仓库中最新代码已修复该问题，但npm包代码是旧的, 是否可以更新webpack-tool去依赖koa-history-api-fallback的git仓库，或者有什么别的解决办法

其响应头如下:

Accept-Ranges: bytes
Connection: keep-alive
Content-Length: 5796
Content-Type: text/html; charset=UTF-8
Date: Tue, 03 Jul 2018 03:45:30 GMT
Vary: Origin

对devOptions有必须新增响应头配置:

        headers: {
          'cache-control': 'max-age=0',
        },

support webpack 4.40+?

webpack 4.40 adds some new plug-in hooks, but webpack-tool hard-code to 4.28.4, can it be modified to 4.28.4 or 4.40.0?

https://github.com/easy-team/webpack-tool/blob/master/package.json#L26
https://webpack.js.org/api/compilation-object/#getassets

  "dependencies": {
    "webpack": "4.28.4 || 4.40.0"
  },