摘要：也就是说，和是两个相互独立的处理单元。那么这样给我们带来什么便利呢如果中出错，在中是不被察觉的。后面加入的入口，不影响入口，所以之前对的是依然生效的。只需要执行，就可以直接看到啦预览效果预览爱奇艺效果预览最后，欢迎各位

大家伙有没有这么一个烦恼：

想写一些简单的前端Demo，却被繁琐的webpack配置给恶心到?
于是乎便有了go-js的存在，我们只需要执行全局安装go-js，执行gojs指令，便可以执行前端代码

执行如下bash脚本：

npm install -g go-js

mkdir workspace
cd workspace
echo "import $ from "jquery"
$(document.body).html("
GO!JS!
")" > jq.js

# 执行并打开浏览器 /jq.js
gojs -i jq.js
# 以 jq.js 为入口文件进行打包，将打包进入当前目录下的 .dist/ 文件夹
gojs -b jq.js

同时支持自定义html模板，在同级目录下新建 jq.html 便会使用 jq.html 作为模板

于是便会自动安装 jquery 依赖，并打开浏览器，enjoy it！

gojs 认为一个js文件就是一个入口(entry)，也对应一个webpack compiler

程序运行时，自动下载依赖包

入口动态添加
如，文件目录结构如下：

go-js-test/
├── a/
│   ├── a/
│   ├── jq.html
│   ├── jq.js
│   ├── style.css
│   └── style.less
├── jq.js
└── react.js

1.在 go-js-test/ 下执行 gojs .
2.请求 /jq.js
3.添加 jq.js 至入口中, webpack building....
4.请求 a/jq.js
5.添加 a/jq.js 至入口中, webpack building....

颗粒化 webpack compiler 和 HMR 的处理
在第二点(入口动态添加)中，对于jq.js和a/jq.js两个入口，分别各自对应webpack compiler 和 HMR 单元。
也就是说，jq.js和a/jq.js是两个相互独立的webpack处理单元。
那么这样给我们带来什么便利呢？

1. 如果jq.js中出错，在a/jq.js中是不被察觉的。
2. 后面加入的a/jq.js入口，不影响jq.js入口，所以之前对jq.js的webpack bundle cache是依然生效的。（对比与 一股脑将2个入口重新用一个webpack单元处理）

支持自定义loaders，在工作目录下命名文件 gojs.jsloader.js
默认loader为:

module.exports = [
  {
    test: /.jsx?$/,
    loader: "babel-loader",
    include: [
      // root
    ],
    query: {
      cacheDirectory: true,
      presets: [
        require.resolve("babel-preset-es2015"),
        require.resolve("babel-preset-react"),
        require.resolve("babel-preset-stage-0")
      ],
      plugins: [
        require.resolve("babel-plugin-transform-decorators-legacy"),
      ]
    }
  },

  {
    test: /.css$/,
    exclude: [
      /.mod.css/,
      /.use(able)?.css/
    ],
    loaders: [
      "style-loader",
      "css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false"
    ]
  },

  {
    test: /.use(able)?.css$/,
    loaders: [
      "style-loader/useable",
      "css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false"
    ]
  },

  {
    test: /.mod.css$/,
    loaders: [
      "style-loader",
      "css-loader?modules&localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false"
    ]
  },

  // .less, .mod.less, .useable.less
  {
    test: /.less$/,
    exclude: [
      /.mod.less$/,
      /.use(able)?.less$/
    ],
    loaders: [
      "style-loader",
      "css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false",
      "less-loader"
    ]
  },

  {
    test: /.use(able)?.less$/,
    loaders: [
      "style-loader/useable",
      "css-loader?localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false",
      "less-loader"
    ]
  },

  {
    test: /.mod.less$/,
    loaders: [
      "style-loader",
      "css-loader?modules&localIdentName=[path][name]__[local]___[hash:base64:5]",
      "autoprefixer?browsers=last 2 version&remove=false",
      "less-loader"
    ]
  },

  // 其他资源
  {
    test: /.(jpeg|jpg|png|gif)$/,
    loader: "url-loader?limit=10240"
  },
  {
    test: /.html$/,
    loader: "html-loader"
  },
  {
    test: /.json$/, loader: "json-loader"
  },
  {
    test: /.woff(?.+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"
  },
  {
    test: /.woff2(?.+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"
  },
  {
    test: /.ttf(?.+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"
  },
  {
    test: /.eot(?.+)?$/, loader: "file"
  },
  {
    test: /.svg(?.+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"
  }
]

适用于一些小型项目或者demo的快速搭建开发。
只需要执行gojs，就可以直接看到demo啦！

效果预览（爱奇艺）

效果预览（Youtube）

最后，欢迎各位 star！