webpack插件之三

2018-04-24 admin

一、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…

原文链接:https://segmentfault.com/a/1190000014544801

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-30443.html

文章标题:webpack插件之三

相关文章
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
Bootstrap 下拉多选框插件Bootstrap Multiselect
引入文件: &lt;link rel=&quot;stylesheet&quot; href=&quot;css&#x2F;bootstrap.min.css&quot; type=&quot;text&#x2F;css&quot;&#x2...
2017-02-22
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
Zepto Ajax 事件
当global: true时。在Ajax请求生命周期内,以下这些事件将被触发。 ajaxStart (global):如果没有其他Ajax请求当前活跃将会被触发。 ajaxBeforeSend (data: xhr, options):再...
2017-04-26
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
DOM之通俗易懂讲解
DOM 是所有前端开发每天打交道的东西,但是随着 jQuery 等库的出现,大大简化了 DOM 操作,导致大家慢慢的 “遗忘” 了它的本来面貌。不过,要想深入学习前端知识,对 DOM 的了解是不可或缺的,所以本文力图系统的讲解下 DOM 的...
2016-01-13
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
bootstrapValidator.min.js表单验证插件
本文实例为大家分享了bootstrapValidator.min.js表单验证的具体代码,供大家参考,具体内容如下 注意:下载后全选复制并粘贴到新建js文件名为bootstrapValidator.min.js下即可。 测试代码: &lt;...
2017-03-17
回到顶部