webpack插件之三

1、open-browser-webpack-plugin

做用：在webpack加載以後打開一個新的瀏覽器窗口。
安裝：npm install open-browser-webpack-plugin --save-dev。（請注意--save-dev和--save的區別）由於這個插件通常在產品發佈時不須要因此只要安裝在開發時依賴的包裏就行，用--save-dev。
例：

var OpenBrowserPlugin = require('open-browser-webpack-plugin');
 
module.exports = {
  entry: path.resolve(__dirname, 'lib/entry.js'),
  output: {
    path: __dirname + "/bundle/",
    filename: "bundle.js"
  },
  plugins: [
    new OpenBrowserPlugin({ url: 'http://localhost:3000' })
  ]
};

屬性

1. url：<String> 默認http://localhost:8080。
2. delay：<Number> 默認0。在默認狀況下當即打開瀏覽器。有數字表明延遲時間，以毫秒爲單位。
3. browser：<String> 打開的瀏覽器，默認是用電腦系統默認的瀏覽器打開。
4. ignoreErrors：<Boolean> 默認爲false只有在沒有錯誤的狀況下才會打開瀏覽器。若是設置成true無論有沒有錯誤都會打開瀏覽器。

---

2、webpack-dev-server

上面的插件用於webpack load是打開瀏覽器，而webpack-dev-server裏面也有一個open:true的屬性來控制自動打開瀏覽器，這二者有什麼區別，我也找了許多並無特別的說明，因此我也不知道。不知道有沒有知道的大神能夠解釋一下嗎?

做用：用於快速開發應用程序，在開發階段使用例如熱重載之類的。
安裝：npm install webpack-dev-server --save-dev
例：

//config.js中的配置
devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: 'localhost',
    port: 8080
}

注意：在webpack配置中國官方網站裏有說：若是你經過 Node.js API 來使用 dev-server， devServer 中的選項將被忽略。將選項做爲第二個參數傳入： new WebpackDevServer(compiler, {...})。

webpack-dev-server也是一個小型的Node.js Express服務器，記得用nodejs建立一個服務器時（即寫在sever.js裏服務器建立），若是沒有用new WebpackDevServer(compiler, devServerOptions )傳入那麼定義在webpack.config.js上devServer部分將不起做用。使用方法以下：

const Webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server ');
const webpackConfig = require('./webpack.config');

const compiler = Webpack(webpackConfig);
const devServerOptions = Object.assign({}, webpackConfig.devServer, {
  stats: {
    colors: true
  }
});
const server = new WebpackDevServer(compiler, devServerOptions);

server.listen(8080, '127.0.0.1', () => {
  console.log('Starting server on http://localhost:8080');
});

屬性

• 一、allowedHosts <Array> 用於設置能夠返回dev服務器的白名單。例：

allowedHosts: [
    '.host.com',//以"."爲開頭的能夠匹配host.com, www.host.com
    'host2.com'
]

• 二、bonjour <Boolean> 爲true是能夠在開始時經過ZooCONF網絡廣播服務器
• 三、clientLogLevel <String> 在開發時會在控制檯顯示許多信息，但這樣顯得很繁瑣，咱們能夠經過這個屬性控制顯示的內容。參數有：none, error, warning 或者 info（默認值）

clientLogLevel: "none"//在config文件中的devServer模塊配置 用法1

//但也能在CLI中配置，即package.json中scripts中配置 用法2
webpack-dev-server --client-log-level none

• 四、color <Boolean> 在控制檯顯示的顏色

//用法 1：
color:true
//2
webpack-dev-server --color

• 五、compress <Boolean> true一切的服務都啓動gzip 壓縮
• 六、contentBase（還不怎麼明白）
• 七、disableHostCheck 同上
• 八、filename <String> 在惰性模式中，此選項可減小編譯。 默認在惰性模式，每一個請求結果都會產生全新的編譯。使用 filename，能夠只在某個文件被請求時編譯。不是懶加載的狀況下不去做用。

lazy: true,
filename: "bundle.js"//如今只有在請求 /bundle.js 時候，纔會編譯 bundle

• 九、headers <Object> 在全部響應中添加首部內容。
• 十、historyApiFallback <Boolean/Object>

historyApiFallback: true//任意的 404 響應均可能須要被替代爲 index.html

//進一步控制
historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: '/views/landing.html' },
    { from: /^\/subpage/, to: '/views/subpage.html' },
    { from: /./, to: '/views/404.html' }
  ]，
  disableDotRule: true//當路徑中使用點(dot),設置disableDotRule爲true
}

• host<String> 默認爲localhost
• hot true啓用 webpack 的模塊熱替換特性

還有許多屬性，能夠參考下面「webpack-dev-server」對應的地址，上面已經十分詳細了。

參考

1. open-browser-webpack-plugin：https://www.npmjs.com/package...
2. webpack-dev-server：https://doc.webpack-china.org...