webpack插件之三

2024年1月14日 142次阅读 来源: shishans

一、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…
    原文作者：shishans
    原文地址: https://segmentfault.com/a/1190000014544801
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞