摘要：也就是說，和是兩個相互獨(dú)立的處理單元。那么這樣給我們帶來什么便利呢如果中出錯，在中是不被察覺的。后面加入的入口，不影響入口，所以之前對的是依然生效的。只需要執(zhí)行，就可以直接看到啦預(yù)覽效果預(yù)覽愛奇藝效果預(yù)覽最后，歡迎各位

大家伙有沒有這么一個煩惱：

想寫一些簡單的前端Demo，卻被繁瑣的webpack配置給惡心到?
于是乎便有了go-js的存在，我們只需要執(zhí)行全局安裝go-js，執(zhí)行g(shù)ojs指令，便可以執(zhí)行前端代碼

執(zhí)行如下bash腳本：

npm install -g go-js

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

# 執(zhí)行并打開瀏覽器 /jq.js
gojs -i jq.js
# 以 jq.js 為入口文件進(jìn)行打包，將打包進(jìn)入當(dāng)前目錄下的 .dist/ 文件夾
gojs -b jq.js

同時支持自定義html模板，在同級目錄下新建 jq.html 便會使用 jq.html 作為模板

于是便會自動安裝 jquery 依賴，并打開瀏覽器，enjoy it！

gojs 認(rèn)為一個js文件就是一個入口(entry)，也對應(yīng)一個webpack compiler

程序運(yùn)行時，自動下載依賴包

入口動態(tài)添加
如，文件目錄結(jié)構(gòu)如下：

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

1.在 go-js-test/ 下執(zhí)行 gojs .
2.請求 /jq.js
3.添加 jq.js 至入口中, webpack building....
4.請求 a/jq.js
5.添加 a/jq.js 至入口中, webpack building....

顆?；?webpack compiler 和 HMR 的處理
在第二點(入口動態(tài)添加)中，對于jq.js和a/jq.js兩個入口，分別各自對應(yīng)webpack compiler 和 HMR 單元。
也就是說，jq.js和a/jq.js是兩個相互獨(dú)立的webpack處理單元。
那么這樣給我們帶來什么便利呢？

1. 如果jq.js中出錯，在a/jq.js中是不被察覺的。
2. 后面加入的a/jq.js入口，不影響jq.js入口，所以之前對jq.js的webpack bundle cache是依然生效的。（對比與 一股腦將2個入口重新用一個webpack單元處理）

支持自定義loaders，在工作目錄下命名文件 gojs.jsloader.js
默認(rèn)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的快速搭建開發(fā)。
只需要執(zhí)行g(shù)ojs，就可以直接看到demo啦！

效果預(yù)覽（愛奇藝）

效果預(yù)覽（Youtube）

最后，歡迎各位 star！