webpack外掛之三

shishans發表於2018-04-23
Web

一、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不管有沒有錯誤都會開啟瀏覽器。

二、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`);
});

屬性

  • 1、allowedHosts <Array> 用於設定可以返回dev伺服器的白名單。例：
allowedHosts: [
    `.host.com`,//以"."為開頭的可以匹配host.com, www.host.com
    `host2.com`
]
  • 2、bonjour <Boolean> 為true是可以在開始時通過ZooCONF網路廣播伺服器
  • 3、clientLogLevel <String> 在開發時會在控制檯顯示許多資訊，但這樣顯得很繁瑣，我們可以通過這個屬性控制顯示的內容。引數有：none, error, warning 或者 info（預設值）
clientLogLevel: "none"//在config檔案中的devServer模組配置 用法1

//但也能在CLI中配置，即package.json中scripts中配置 用法2
webpack-dev-server --client-log-level none
  • 4、color <Boolean> 在控制檯顯示的顏色
//用法 1：
color:true
//2
webpack-dev-server --color
  • 5、compress <Boolean> true一切的服務都啟動gzip 壓縮
  • 6、contentBase（還不怎麼明白）
  • 7、disableHostCheck 同上
  • 8、filename <String> 在惰性模式中，此選項可減少編譯。 預設在惰性模式，每個請求結果都會產生全新的編譯。使用 filename，可以只在某個檔案被請求時編譯。不是懶載入的情況下不去作用。
lazy: true,
filename: "bundle.js"//現在只有在請求 /bundle.js 時候，才會編譯 bundle
  • 9、headers <Object> 在所有響應中新增首部內容。
  • 10、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…

相關文章