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...